1

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
        }
   });
}
harv3
  • 263
  • 1
  • 6
  • 19
  • 1
    It looks like you need to handle access control on your backend, being localhost I assume that you're also responsible for writing the server side code. – Sorix Sep 16 '19 at 11:20
  • I can make changes to server side code. can you please specify how to handle it in back end? – harv3 Sep 16 '19 at 11:24
  • 1
    You need to add what you use to serve frontend content and what your backend is – krl Sep 16 '19 at 11:38
  • Could you add what kind of server are you using and post your code that handles the ajax request? – Dropout Sep 16 '19 at 11:57
  • I faced this same issue some time ago, you can check what I did [here](https://stackoverflow.com/a/57358255/7123439). If you have access to your database you can add the required parameters in the headers, in your case is missing `Access-Control-Allow-Origin`. I don't know what language you are using in your backend, but if is PHP you can solve this issue simple as [that](https://enable-cors.org/server_php.html). Also, you can help others understand your problem better if you include more details about your problem, like what you already tried and your current front and backend code. – leonardofmed Sep 16 '19 at 12:06
  • @Dropout Right now I dont have access to server side code. I will update it tomorrow – harv3 Sep 16 '19 at 12:25
  • @harv3 sure. Comment if you need help. Here's server side stuff: https://enable-cors.org/server.html and on your client you need to specify `crossDomain: true,` check this out: https://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working Good luck! – Dropout Sep 16 '19 at 12:28
  • @Dropout server being used is nginx. So can I make changes to nginx configuration to allow cross origin requests from certain domain? – harv3 Sep 17 '19 at 12:45
  • @harv3 yes exactly.. the server needs to allow this in order for it to work.. – Dropout Sep 18 '19 at 10:14

1 Answers1

2

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) {
            // ...
        }
    });
Dropout
  • 13,653
  • 10
  • 56
  • 109
  • 1
    there is no need to force `crossDomain: true`(it's already `crossDomain` for cross-domain requests) until you want to has some special processing for response. See https://stackoverflow.com/questions/21255194/usages-of-jquerys-ajax-crossdomain-property for detailed explanation on that. – skyboyer Sep 16 '19 at 12:34