CORS request not working in Safari

Question

I am making a CORS xhr request. This works fine in chrome, however when I run in safari I get an 'Can not load ---- access not allowed by Access-control-allow-origin'. The code is exactly the same and I have set the CORS on the server. Below is my code.(has access control, but you are free to try without the accessToken)

 var water;
 var req = new XMLHttpRequest;
 req.overrideMimeType("application/json");
 req.open('GET', 'https://storage.googleapis.com/fflog/135172watersupplies_json', true);
 req.setRequestHeader('Authorization', 'Bearer ' + accessToken);
 origThis = this;
 var target = this;
 req.onload = function() {
 water = req;

 req.send(null);

After looking at the request headers I see that a OPTIONS request is made first and this is the request that is not allowed. The origin header is not included in the response in Safari, but is in chrome. What would cause this. Any help would be greatly appreciated.

UPDATE: I have tried in Safari for Windows and it works, so I'm not sure what is going on here. The mac that I am using is a remote access (Macincloud.com), but I don't think that would have anything to do with it.

Answer 1

Thanks for all the responses, I got this finally myself. I added 'Origin' to my responseHeaders and works fine now.

Answer 2

When I query your URL I'm getting back the following Access-Control headers:

Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Authorization, Cache-Control, Content-Length, Date, Expires, Server, Transfer-Encoding, x-goog-meta-foo1

I suspect it has something to do with your Access-Control headers - either you're leaving something out, or being too specific.

Given that you're actually sending a custom header, you may want to try:

Access-Control-Allow-Headers: *

You could also see if leaving out Access-Control-Expose-Headers makes a difference.

Beyond that, it would actually be helpful to see the actual request / response headers.

Answer 3

I had the same problem where CORS worked in Chrome, but threw an origin error in Safari. Turned out it was a Kerberos authorization issue. When I loaded the XHR URL directly in Safari, I was prompted for credentials. After entering them, I returned to the original site, and Safari no longer had the CORS error.

Answer 4

When I try

curl -v -X OPTIONS \
  -H 'Origin: fflog.storage.googleapis.com' \
  -H 'Access-Control-Request-Method: GET'  \
  https://storage.googleapis.com/fflog/135172watersupplies_json

I get, among other headers:

Access-Control-Allow-Origin: *

When I execute AJAX requests against https://storage.googleapis.com/fflog/135172watersupplies_json from Safari 6.0.4 on Mac OS 10.8.3 I get 403 errors, but they do all execute.

So I can only guess that you are trying to send a credentialed request for which a wildcard Access-Control-Allow-Origin is not allowed.