請求標頭中存在緩存時，Chrome 瀏覽器和 CORS 問題

Question

我不確定這里是否討論過這個問題，但有些事情很奇怪。 我在 Windows 10 中運行此版本的 Chrome：版本 86.0.4240.198（官方構建）（64 位）

我有一個域，比如 p.com，它正在從 Google Cloud Storage 中獲取一個 PDF 文件，其中包含 url，例如： https://storage.googleapis.com/bucket/aaa.pdf

谷歌雲存儲已經有 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"]}]

當我在請求標頭中不緩存的情況下進行提取時，它是成功的。 但是當我在這樣的請求標頭中啟用緩存時：

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 配置必須明確 state 允許哪些請求標頭（除了少數已被視為“安全”的標頭）。 因此，您收到該錯誤是因為您添加了不允許的請求標頭。 要解決此問題，您需要在responseHeader字段中包含所有允許的標頭。

也就是說，你確定你真的想要使用這些標題嗎？ 雖然可以使用Cache-Control作為請求 header，但它並不“啟用緩存”。 您更有可能希望在response中設置這些標頭，您可以通過配置Google Cloud Storage 來做到這一點。

Answer 2

在我自己擺弄了很多之后，我還觀察到緩存的請求在 Chrome 中不包含Origin header，所以我不得不禁用緩存以避免 CORS 問題。 我通過在我的請求配置中添加cache: 'no-store'來做到這一點：

fetch(url, {
  method: 'GET',
  mode: 'cors',
  cache: 'no-store', // for some reason Chrome's caching doesn't send Origin
})

FWIW，Safari 在我的測試中沒有表現出這種行為。