Question

我正在制作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），但我不认为这与它有任何关系。

Answer 1

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

问题是Safari 7将Access-Control-Request-Headers标头设置为＆＃34; origin，x-requested-with＆＃34;，但我的AWS CORS配置仅允许＆＃34; x-requested-与＆＃34;：

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

我添加了＃34;起源＆＃34;作为一个允许的标题，一切正常。

        <AllowedHeader>origin</AllowedHeader>

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

Answer 2

我刚遇到类似的问题，CORS错误。它适用于Firefox＆amp; Chrome，但不是Safari 10.

原来我们需要在JSON URL上加上斜杠。

Answer 3

感谢所有的回复，我最终得到了这个。我将“Origin”添加到了我的responseHeaders并且现在工作正常。

Answer 4

就我而言，这是Accept-Langauge标头的问题。我在Accept-Language内添加了Access-Control-Allow-Headers，此问题已解决。

Answer 5

对于CORS请求，您应该使用您的来源fflog.storage.googleapis.com。如果您使用通用storage.googleapis.com来源，则任何网站都可以访问您的存储分区。

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

我也遇到了Safari POST请求的问题，但还没有答案。 GET没关系。

Answer 6

当我尝试

时

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对https://storage.googleapis.com/fflog/135172watersupplies_json执行AJAX请求时，我收到403错误，但它们都执行了。

所以我只能猜测您是否尝试发送credentialed request，但不允许使用通配符Access-Control-Allow-Origin。

Answer 7

尝试删除override mime类型。

 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 8

当我查询您的网址时，我收回了以下Access-Control headers：

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是否有所作为。

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

Answer 9

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

2017-01-01 21:10

Answer 10

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.

Answer 11

我们在Cloudfront上有完全相同的问题（由s3存储桶支持），此处给出的解决方案无济于事。问题在于Cloudfront裁剪了一些标题。这为我们解决了这个问题：

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

将其放在此处，以防将来有人遇到此解决方案。

Answer 12

设置两个响应头：

Access-Control-Allow-Methods：“ *”，允许所有
证明服务器的Access-Control-Allow-Methods响应标头的值设置为*。它必须显式设置为允许使用方法而不是通配符，因为此MDN文档中此处给出的iOS Safari浏览器不支持它。

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

Answer 13

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

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编码。

希望这对某人有帮助！

Answer 14

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

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

CORS请求在Safari中不起作用

14 个答案: