56

我正在提出 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);

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

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

4

14 回答 14

47

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

问题是 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>

我将“来源”添加为允许的标题，一切正常。

        <AllowedHeader>origin</AllowedHeader>

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

于 2014-04-07T22:29:09.267 回答
12

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

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

于 2016-10-05T13:25:16.727 回答
2

我不确定其他人是否会遇到此问题，但我正在向以下 URL 发出请求：

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

URL 中的|（管道）字符导致 Safari 出现奇怪的问题，因为它没有正确地进行 URL 编码。

在我的 Javascript 中，我只是替换了我的旧网址：

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

和

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

%7C是|（管道）字符的正确 URL 编码。

希望这对某人有帮助！

于 2020-07-08T18:02:05.303 回答
2

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

于 2018-11-12T13:06:02.950 回答
2

至于 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>
于 2017-02-03T19:12:06.990 回答
1

设置两个响应头：

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

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

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

于 2020-04-03T04:34:10.170 回答
0

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

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

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

于 2013-05-30T08:22:59.963 回答
0

当我尝试

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

除其他标题外，我得到：

Access-Control-Allow-Origin: *

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

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

于 2013-06-05T05:24:16.880 回答
0

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

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

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

于 2020-03-03T07:38:23.687 回答
0

我有一个类似的问题。我有一个从站点 A 登录的站点，成功登录后，用户将被重定向到站点 B。站点 A 和 B 都从站点 A 加载相同的语言文件。发生在我身上的是该文件首先在站点 A 上加载（不需要 CORS），但是当用户转到站点 B 时，Safari 解释它已经拥有该文件，但内部失败并出现 CORS 错误，因为它已从站点 A 缓存。

解决方案是让服务器在响应中添加“Vary: Origin”标头，以便愚蠢的 Safari 知道如何正确管理缓存文件。

于 2021-07-29T22:24:34.947 回答
0

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

于 2018-04-18T17:55:01.647 回答
-1

当我查询您的 URL 时，我将返回以下Access-Control 标头：

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

我怀疑这与您的 Access-Control 标头有关 - 您要么遗漏了某些内容，要么过于具体。

鉴于您实际上是在发送自定义标头，您可能想尝试：

Access-Control-Allow-Headers: *

您还可以查看省略是否有所作为Access-Control-Expose-Headers。

除此之外，查看实际的请求/响应标头实际上会有所帮助。

于 2013-06-09T21:50:29.687 回答
-1

尝试删除覆盖的 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();
于 2013-06-06T11:59:47.090 回答
-5

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

于 2013-06-09T22:11:33.673 回答