CORS not working on Chrome

StackOverflow https://stackoverflow.com/questions/3136140

Question

I've set up Cross-Origin Resource Sharing on a server (Jetty using the CrossOriginFilter) and it works perfectly on IE8 and Firefox. On Chrome, it just ... doesn't.

  $.ajax({ url : crossOriginURL,
    type : "GET",
    error : function(req, message) {
        alert(message);
    },
    dataType :  "json" } );

The error function is invoked, with the helpful message "error". It seems to be making the request, but without any of the headers you'd expect. If the URL is from the same origin, it works fine.

Was it helpful?

Solution 3

what finally worked for me is xhr.setRequestHeader('Content-Type', 'text/plain');

OTHER TIPS

I have solved my problem this way:

Add this to your PHP Code:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");

Or add these headers to your response.

Problem: The browsers ask to the server for options before your main request, to check if the site has the option to allow comunication with different origin, and then if yes, they do your POST or GET request.

EDIT: Try this (without your hack) to see if you're receiving data... 

$.ajax({ url : crossOriginURL,
    type : "GET",
    error : function(req, message) {
        alert(message);
    },
    success : function(data) {
        alert(data);
    },
    dataType :  "text"} );

It looks like the original poster may have resolved their issue, but for anyone having the same issue as commentor Elisabeth, I believe the problem may be that Chrome refuses to set a an Origin header for a CORS request if you are running the request from a local file. It won't even let you explicitly override the Origin header. This causes the server to see "Origin: null", which results in a 403 in most cases. Firefox apparently has no such constraint, as I've found after much hair-pulling.

If you absolutely need to use Chrome in this case, you can resolve your issue by running a webserver locally and always accessing your file via http: instead of via file:.

In my case, it's localhost:8001 (the front-end) which tries to call the APIs at localhost:7001 (on server.js as a Node server). Even I had the CORS plugin installed and turned on on Chrome, still the CORS policy rejected them as preflight cases.

It took me more than half day to finally resolve the issue. Here are the "stupid" steps, believe it or not:

i. Turn OFF the CORS plugin, reload the app, at this time you should still get the errors which are correct.

ii. Turn it back ON, reload the app, if the APIs are successful, stop here, no need to proceed to iii.

iii. However if you still get the CORS rejection, then uninstall Chrome and install an up-to-date Chrome.

iv. On the new Chrome, the previously installed CORS plugin should still be there but with OFF status.

v. Reload the page, you should get the CORS rejection messages on console which are correct.

vi. Turn it back ON, reload the page, the errors should disappear.

No further ideas if the above steps still do not work in your case.

I also tried the following on server.js (Node) and still do not work, so no bother to try:

var app = express();
var cors = require('cors'); // Already done “npm i cors --save-dev”
app.options('*', cors());

When i updated the chrome i was facing the problem,I've solved it Google Extension "Access-Control-Allow-Credentials" new version. if it is an old version,you will not need to work on a new Google Chrome version

https://chrome.google.com/webstore/detail/access-control-allow-cred/hmcjjmkppmkpobeokkhgkecjlaobjldi?hl=en

Check to make sure that you didn't set your server to both allow credentials and set the allow origin header to *. Like below:

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

If your server is returning these values for these headers, then it will not work. If you set Access-Control-Allow-Credentials to true, then you can't use *as the value of the Access-Control-Allow-Origin header. Below is an excerpt from the MDN webdocs for the header(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin):

For requests without credentials, the literal value "*" can be specified, as a wildcard; 
the value tells browsers to allow requesting code from any origin to access the resource. 
Attempting to use the wildcard with credentials will result in an error.

If the above is the case, simply set Access-Control-Allow-Credentials to false.

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: false

References

CORS will work in chrome. Just use chrome is safe-mode, i.e., use disable security settings. Google it about it, or you can even start from command line also.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top