javascript CORS 请求在 Safari 中不起作用

CORS request not working in Safari

提问by Patrick

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)

我正在提出 CORS xhr 请求。这在 chrome 中运行良好，但是当我在 safari 中运行时，我收到“无法加载 ---- Access-control-allow-origin 不允许访问”。代码完全相同，我已经在服务器上设置了 CORS。下面是我的代码。（有访问控制，但你可以在没有 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.

查看请求标头后，我看到首先发出 OPTIONS 请求，这是不允许的请求。原始标头不包含在 Safari 的响应中，但包含在 chrome 中。什么会导致这个。任何帮助将不胜感激。

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.

更新：我已经在 Safari for Windows 中尝试过并且它可以工作，所以我不确定这里发生了什么。我使用的 mac 是远程访问 (Macincloud.com)，但我认为这与它无关。

采纳答案by Patrick

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

谢谢大家的回复，我终于自己搞定了。我在我的 responseHeaders 中添加了“Origin”，现在工作正常。

回答by Seth

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.

我在针对 Amazon S3 中的文件发出 XHR 请求时遇到了同样的错误。在 Safari 7 上它失败了。我知道您没有使用 Amazon S3，但我想我会发布以防此解决方案对其他人有所帮助。

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":

问题是 Safari 7 将 Access-Control-Request-Headers 标头设置为“origin, x-requested-with”，但我的 AWS CORS 配置只允许“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.

注意：AllowedOrigin*仅用于开发目的。有关更多信息，请参阅下面的@andes 评论。

回答by William Macdonald

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

我刚刚遇到了类似的问题，CORS 错误。它适用于 Firefox 和 Chrome，但不适用于 Safari 10。

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

结果我们需要在 JSON URL 上加上斜杠。

回答by deen

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

就我而言，这是 Accept-Language 标头的问题。我已经Accept-Language在里面添加Access-Control-Allow-Headers并解决了。

回答by Sarang

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:

我们在Cloudfront（由 s3 存储桶支持）上遇到了完全相同的问题，这里给出的解决方案没有帮助。问题在于 Cloudfront 剪辑了一些标题。这为我们解决了它：

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

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.

把它放在这里以防将来有人遇到这个解决方案。

回答by code.rookie

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.

1. 访问控制允许方法：'*'，允许所有

2. 原来服务器的 Access-Control-Allow-Methods 响应标头的值设置为 *。它必须明确设置为允许方法而不是通配符，因为它不受 iOS 中的 safari 支持，如本 MDN 文档中所述。

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

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

回答by Edhowler

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.

至于 Amazon S3，它仅在我添加了更多允许的标头、Content-Type 和 Range 后才能在 safari 中工作。其中之一完成了这项工作。

<?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>

回答by Seth Moore

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.

我在 Chrome 中使用 CORS 时遇到了同样的问题，但在 Safari 中引发了原始错误。原来这是一个 Kerberos 授权问题。当我直接在 Safari 中加载 XHR URL 时，系统提示我输入凭据。输入后，我回到原来的站点，Safari不再出现CORS错误。

回答by Kyaw Tun

For CORS request you should be using your origin fflog.storage.googleapis.com. If you use common storage.googleapis.comorigin, any site can access to your bucket.

对于 CORS 请求，您应该使用您的 origin fflog.storage.googleapis.com。如果您使用公共storage.googleapis.com源，则任何站点都可以访问您的存储桶。

have try try remove overrideMimeType? If you set mime type, it will return correctly.

有尝试尝试删除overrideMimeType？如果您设置 MIME 类型，它将正确返回。

I also have problem with Safari POST request, but no answer yet. GET is OK.

我也有 Safari POST 请求的问题，但还没有答案。GET 没问题。

回答by Old Pro

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_jsonfrom Safari 6.0.4 on Mac OS 10.8.3 I get 403 errors, but they do all execute.

当我https://storage.googleapis.com/fflog/135172watersupplies_json在 Mac OS 10.8.3 上针对来自 Safari 6.0.4 的AJAX 请求执行 AJAX 请求时，我收到 403 错误，但它们都会执行。

So I can only guess that you are trying to send a credentialed requestfor which a wildcard Access-Control-Allow-Originis not allowed.

所以我只能猜测您正在尝试发送一个不允许使用通配符的凭据请求Access-Control-Allow-Origin。

回答by cocco

try to remove overide mimetype.

尝试删除覆盖 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();