Chrome 请求中存在缓存时浏览器和 CORS 问题 headers

Question

我不确定这里是否讨论过这个问题，但有些事情很奇怪。我是运行 Chrome 在 Windows 10 中的这个版本：版本 86.0.4240.198（正式版）（64 位）

我有一个域，比如 p.com，它正在从 Google 云存储中获取一个 PDF 文件，url 如下所示： https://storage.googleapis.com/bucket/aaa.pdf

Google 云存储已经有这样的 CORS 设置：

[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD", "OPTIONS"], "origin": ["*"], "responseHeader": ["Content-Type", "Access-Control-Allow-Origin", "X-Requested-With", "Date", "Range", "Vary", "Access-Control-Allow-Headers"]}]

当我在请求 headers 中进行不缓存的提取时，它是成功的。但是当我在请求 headers 中启用缓存时，如下所示：

fetch("https://storage.googleapis.com/bucket/aaa.pdf", {
  "headers": {
    "cache-control": "max-age=315360000",
    "expires": "Mon, 06 Dec 2021 06:39:19 GMT",
    "pragma": "cache"
  },

  "method": "GET",
});

失败并出现此错误：

Access to fetch at 'https://storage.googleapis.com/bucket/aaa.pdf' from origin 'http://p.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我的问题是，CORS 和缓存是二元选择吗？两者任一？我的意思是你不能两者兼得。我想启用CDN和缓存，以便快速加载资源。

Answer 1

您的 CORS 配置必须明确说明允许哪些请求 header（除了少数已被视为“安全”的 header）。所以您收到该错误是因为您添加了不允许的请求 header。要解决此问题，您需要在 responseHeader 字段中 include 所有允许的 header。

也就是说，您确定要使用那些 header 吗？虽然可以使用 Cache-Control 作为请求 header，但这是不寻常的，并且不会“启用缓存”。您更有可能希望在响应中设置这些 header，您可以通过 configuring Google Cloud Storage 来设置。

Chrome 请求中存在缓存时浏览器和 CORS 问题 headers

Chrome Browser and CORS issue when caching present in request headers

google-chrome

cache-control

http-headers

cors