Safari：重新加载后：“由于访问控制检查，无法加载Fetch API”

Question

我在Safari的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)
});

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

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控制台中看到“由于访问控制检查，无法加载Fetch API”。所以我猜想，这与Safari如何缓存CORS请求/预飞行有关。

在Firefox和Chrome中，我的CORS请求非常有用。

我该如何解决这个问题？

Answer 1

在我的例子中，我使用的是http而不是https，这使得Safari不包括我的授权头。

Answer 2

对我来说，是广告拦截器打破了这一点。我有一个名为“advertiser_id”的查询参数，我的广告拦截器将其标识为“需要被阻止”。导致问题描述的cors错误。

仅仅禁用adblocker就解决了这个问题。

Answer 3

我的建议是，如果你能控制你的服务器，就在'http://localhost:8888/myPath/'.

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

我建议这样做的原因是我有完全相同的问题。我对这个问题的不同之处在于，它表现为Safari在缓存图像上的飞行前CORS检查失败，其中图像src是一个重定向（Canvas Instructure URL重定向到AWS S3 bucket）。以你的例子来说，我怀疑这与你的本地主机和域有关。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. 

原始CORS请求是正常的。只是缓存资源的预检失败。我希望这是一个Safari错误，因为如果它是一个功能，Chrome

1. 在Safari（v13.2，桌面或iOS上有文件缓存）中，转到站点https://cidilabs.instructure.com/courses/3/pages/upload-slash-embed-image-test.我不控制这个公共页面，如果它成为一个断开的链接，我深表歉意。如果您可以访问Canvas LMS，您可以通过Canvas image upload tool将图像上载到模块页面来复制此页面。Canvas将上传的图像作为重定向链接嵌入到S3 bucket
2. 然后刷新该页面，在缓存的图像上启动飞行前CORS请求，以查看损坏的图像链接

• 使用带有嵌入式CORS重定向图像的页面时，请始终打开专用浏览器。该问题仅在缓存图像时发生。[对用户来说不是一个实用的解决方案]