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.

Solution 1

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

Solution 2

I encountered the same error when making an XHR request against a file in Amazon S3. On Safari 7 it was failing. I know you're not using Amazon S3, but I thought I'd post in case this solution helped others.

The problem was that Safari 7 set the Access-Control-Request-Headers header to "origin, x-requested-with", but my AWS CORS configuration only allowed "x-requested-with":

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>x-requested-with</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

I added "origin" as an allowed header and everything worked fine.

        <AllowedHeader>origin</AllowedHeader>

Note: the AllowedOrigin of * is for development purposes only. See @andes comment below for more information.

Solution 3

I just had a similar problem, CORS error. It would work in Firefox & Chrome but not Safari 10.

Turned out we needed to put the trailing slash on the JSON URL.

Solution 4

In my case, it was an issue for Accept-Language header. I have added Accept-Language inside Access-Control-Allow-Headers and it got resolved.

Solution 5

Im not sure if anyone else will have this problem but I was making a request to a URL like:

https://api.website.com/api/v1/users/auth0|5ef7502019360a7/

The | (pipe) character in the URL was causing a strange issue with Safari because it was not being URL Encoded correctly.

In my Javascript I simply replaced my old url:

const url = "https://api.website.com/api/v1/user/auth0|5ef27593603a7";

with

const url = "https://api.website.com/api/v1/user/auth0|5ef27593603a7".replace("|", "%7C");

%7C is the correct URL encoding for the | (pipe) character.

Hope this helps someone!

View more solutions

Comments

[Patrick Jackson]

I did try and it did not work...also tried the other url with no luck :/

[Patrick Jackson]

Thanks for the post. but to really test CORS with cURL you need to set the origin header to simulate the browser environment.

[andes]

If you're following this example, please note that using * for AllowedOrigin is really meant for dev environments - you should use a white list in production, for most use cases. Here's an example for implementing a whitelist: github.com/monsur/CORSinAction/blob/master/ch07/listing-7.1/‌​…

[Sohaib]

Could you elaborate a bit about the response.

[Umesh Patadiya]

Which kind of header? and where to put it? can you please add the exact steps with code?

[returnvoid]

If still someone is having issues, what fixed mine was using origin (lowercase) because I had Origin

[Michael]

What the heck? This worked for me too. Thanks but what's wrong with Safari?

[FooBar]

What trailing slash on what JSON URL? The XHR request that is failing? Some Allowed-origin header? Please elaborate.

[FooBar]

In PHP I believe he added something like this: header( 'Access-Control-Allow-Headers: Accept, Accept-Encoding, Accept-Language, Authorization, Cache-Control, Pragma, Content-Type, Origin, Referer, Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site, User-Agent, X-Requested-With');

[spiraleddy]

Thank you! This worked for me. Without backslash, CORS error on Safari, fine in FF & Chrome. With backslash, fine on Safari, FF & Chrome!

[Valerio Mazzeo]

Provided correct CORS headers are generated by the web-server, this is the next thing to check. For me, everything was was working on Chrome, but I was getting a preflight error in Safari. A better approach would be to encodeURI(url) the whole url rather than manually replacing characters. Other than this has fixed it for me.