Safari 狩猎旅行；由于访问控制检查，无法加载获取API“；重新加载后_Safari_Cors_Fetch

Safari 狩猎旅行；由于访问控制检查，无法加载获取API“；重新加载后

safari cors

Safari 狩猎旅行；由于访问控制检查，无法加载获取API“；重新加载后,safari,cors,fetch,Safari,Cors,Fetch,我在狩猎的CORS系统中经历了一些奇怪的行为。我从JS Fetch API发送了一个POST请求，如下所示： const res = await fetch('http://localhost:8888/myPath', { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); POST /myPat

我在狩猎的CORS系统中经历了一些奇怪的行为。我从JS Fetch API发送了一个POST请求，如下所示：

const res = await fetch('http://localhost:8888/myPath', {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(body)
});

POST /myPath HTTP/1.1
Accept: */*
Content-Type: application/json
Origin: http://my.domain.com
Content-Length: 335
Accept-Language: en-gb
Host: localhost:8888
User-Agent: Mozilla/5.0...
Referer: http://my.domain.com
Accept-Encoding: gzip, deflate
Connection: keep-alive

根据Safari的网络监视器，请求头如下所示：

const res = await fetch('http://localhost:8888/myPath', {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(body)
});

POST /myPath HTTP/1.1
Accept: */*
Content-Type: application/json
Origin: http://my.domain.com
Content-Length: 335
Accept-Language: en-gb
Host: localhost:8888
User-Agent: Mozilla/5.0...
Referer: http://my.domain.com
Accept-Encoding: gzip, deflate
Connection: keep-alive

以下响应来自服务器：

HTTP/1.1 200 OK
Date: Tue, 28 Jul 2020 19:15:45 GMT
Vary: Origin
Content-Length: 4
Content-Type: application/json
Access-Control-Allow-Origin: http://my.domain.com
Server: uvicorn

不幸的是，这台机器上没有Wireshark，Safari也没有显示飞行前的请求。所以我不知道是否有飞行前的情况发生，以及情况如何

现在的问题是：当我有一个新的浏览器会话（例如，使用私有模式）并访问触发获取请求的文档时，一切正常。只有在重新加载页面以再次发送CORS请求之后，我才能在Safari控制台中看到“由于访问控制检查，FetchAPI无法加载”。所以我想，这与Safari如何缓存CORS请求/预飞行有关

在Firefox和Chrome中，我的CORS请求就像一个符咒

如何解决这个问题？

我的建议是，如果您可以控制服务器，请在服务器上添加一个终止正斜杠http://localhost:8888/myPath/"

例如：背景我建议这样做的原因是我有完全相同的问题。这个问题的变体是，它表现为Safari在缓存图像上的飞行前CORS检查失败，其中图像src是一个重定向（Canvas Instructure URL重定向到AWS S3 bucket）。就您的示例而言，我怀疑这与localhost与domain.com主机名的差异有关

我的Safari控制台错误是主机页的主机域被图像源的域拒绝。我想你的和这个差不多

FetchEvent.respondWith received an error:
TypeError: Cross-origin redirection to <actual image source> 
denied by Cross-Origin Resource Sharing policy: 
Origin <hosted page containing the image src redirect to image source> 
is not allowed by Access-Control-Allow-Origin.

FetchEvent.respondWith收到错误：
TypeError:跨原点重定向到。我不控制此公共页面，如果它成为断开的链接，我深表歉意。如果您有权访问Canvas LMS，您可以通过Canvas image upload tool将图像上载到模块页面来复制此页面。Canvas将上载的图像作为重定向链接嵌入到S3存储桶
然后刷新该页面，对缓存的图像发起飞行前CORS请求，以查看损坏的图像链接
解决方案选项：

使用带有嵌入CORS重定向图像的页面时，始终打开专用浏览器。该问题仅在缓存图像时发生。[对用户来说不是一个实用的解决方案]
将终止solidus（正斜杠）添加到作为CORS重定向路径的所有可缓存资源。只有当重定向路径看起来像文件而不是目录时，才会发生此问题。[我对图像src URL的这种不好的风格感到苦恼。但是，因为图像src实际上是一个重定向，而不是一个真正的文件，所以我认为将其显示为dir并不完全不好。]**最实用的解决方法
将图像src URL设置为与其嵌入的页面不同的主机。只有当缓存的图像src重定向URL与网页是同一主机时，问题才会出现。[这太奇怪了！也许是Safari缓存主机页资源的疯狂方式。]
当转到带有CORS图像src重定向的页面时，请使用FireFox或Chrome。这个问题只发生在Safari上。[糟糕的解决方法，减少了大量用户]
我也有同样的问题。我不知道这是Safari缓存错误，还是服务器上的CORSrule可以修复的错误。只有在Safari对缓存资源进行飞行前CORS检查时才会发生这种情况，这让我想到了它的Safari。除了建议终止正斜杠外，本文还建议在所有支持CORS的响应中添加以下标题：Vary:Origin，Access Control Request Headers，Access Control Request Method