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\'.

Answer 1

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!

Answer 2

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

Answer 3

As for Amazon S3, it only worked in safari after I added more allowed headers, Content-Type and Range. One of these did the job.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
        <AllowedHeader>X-Requested-With</AllowedHeader>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>Range</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 4

Set two response headers:

1. Access-Control-Allow-Methods: '*', allow all

2. Turns out server had Access-Control-Allow-Methods response header's value is set to *. It had to explicitly set to allow methods instead of a wildcard as it is not supported by a safari in iOS as given here in this MDN doc.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

Answer 5

try to remove overide mimetype.

 var
 jsonhandler=function(){var req=JSON.parse(this.response);console.log(req)},
 req=new XMLHttpRequest;
 req.open('GET','https://storage.googleapis.com/fflog/135172watersupplies_json');
 req.setRequestHeader('Authorization','Bearer '+accessToken);
 req.onload=jsonhandler;
 req.send();

Answer 6

We had the exact same issue on Cloudfront (backed by s3 bucket) and the solutions given here did not help. The problem was with Cloudfront clipping some headers. This resolved it for us:

https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

Putting it here just in case someone comes across this solution in future.