CORS request not working in Safari

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.

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.

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!