Question

我正尝试在Google Storage中使用多个CORS原始站点。

Mozilla Firefox似乎没有多个来源的任何问题。但是Google Chrome抛出此错误：Access to XMLHttpRequest at 'FILE AT GOOGLE STORAGE' from origin 'https://example2.org' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://example1.org' that is not equal to the supplied origin.

我尝试像这样编写cors json文件：

[
    {
      "origin": ["https://example1.org", "https://example2.org"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD"],
      "maxAgeSeconds": 1800
    } 
]

如此：

[
    {
      "origin": ["https://example1.org"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD"],
      "maxAgeSeconds": 1800
    },
    {
      "origin": ["https://example2.org"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD"],
      "maxAgeSeconds": 1800
    }  
]

Google Chrome浏览器不喜欢这两种版本。

Answer 1

您指定的第一种正确方法是，保存一个JSON文件（即bucket-cors-config.json）：

[{
  "origin": ["https://example1.org", "https://example2.org"],
  "responseHeader": ["Content-Type"],
  "method": ["GET", "HEAD"],
  "maxAgeSeconds": 1800
}]

然后使用gcloud cli util在您的存储桶上进行设置：

gsutil cors set bucket-cors-config.json gs://my-bucket

如果要在浏览器中检查不同的来源，并且遇到CORS错误，请确保不是由于浏览器缓存引起的。由于目标URL匹配，因此某些浏览器将在错误的来源上使用缓存的响应。此缓存的响应将具有错误的原始标头，并导致CORS错误。

Answer 2

Arjun的方法效果很好。

如果有人在缓存预检时遇到问题，并且不希望将来源设置为通配符或减少缓存窗口；老式的清除缓存练习效果很好，例如查询字符串值。

有点hack，但是在我的用例中，它很好地附加了原始查询字符串值：

const fetchHandler = url => fetch(`${url}?cache=${window.origin}`)
  .then(res => {
    if (res.ok) return Promise.resolve(res);
    return Promise.reject(res);
  })
  .catch(err => Promise.reject(err));

export default fetchHandler;

如何使用Google Cloud Storage在CORS json文件中设置多个来源？

2 个答案: