CODEWITHSUNDEEP
javascriptgoogle-chromecors
harv3
harv3

Reputation: 303

Fix CORS error without disabling security in chrome

I have a javascript code which loads json data from some json_url using ajax requests I am getting folloowing error when running the html in chrome

 Access to XMLHttpRequest at json_url from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To fix this error I am opening chrome by disabling web security through the following command google-chrome --disable-web-security --user-data-dir="/tmp/chrome_dev_test"

Is there anyway to fix this error so that I can run html on chrome without disabling web security every time?

front-end code used:

function getJSON(url){
    $.ajax({
        type:'GET',
        url:url,
        dataType:'json',
        contentType:'application/json', 
        timeout: 3000,
        success:function(data){
            //do something with data
        }
   });
}

Upvotes: 2

Views: 6486

Answers (1)

Dropout
Dropout

Reputation: 13866

You need to enable CORS on your server side. Here's a guide for many servers, use what suits you.

https://enable-cors.org/server.html

Also in your client-side code, when you specify your request add that it's a CORS request. For example:

$.ajax({
    url: "http://www.someotherdomain.com",
        type: "POST",
        crossDomain: true, //<-- this right here
        data: JSON.stringify(somejson),
        dataType: "json",
        success: function (response) {
            // ...
        },
        error: function (xhr, status) {
            // ...
        }
    });

Upvotes: 2

Related Questions