Google Cloud：对图像的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我通过 Cloud Run 在 Google Cloud 上部署了一个网站。该网站使用 Django 和 Webpack。资源会自动加载到 Google Cloud Storage 存储桶中。

但是，当我尝试加载网站时，某些资源未正确加载：

Access to image at 'https://storage.googleapis.com/<bucket-name>/bcf8ff28514bad926b0c.png' from origin '<URL of my website>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果我尝试仅通过将 URL 复制粘贴到浏览器中来访问请求，则效果很好（我可以看到图像）。

通过查看未正确加载的资源的请求标头，它们的

Origin

设置为我网站的 URL，例如

https://example.com

。正确加载的资源在请求标头中没有

Origin

。此外，该问题仅出现在Chrome和Safari上，而不会出现在Firefox上。当我在 Firefox 上检查请求标头时，原点实际上设置为

https://storage.googleapis.com/

（而不是

https://example.com

），我认为这就是资源正确加载的原因。

我想有两种方法可以解决这个问题，尽管我不知道应该首选哪种解决方案以及如何实现它：

1. 找到一种方法，在 Chrome 和 Safari 上将请求标头中的 Origin 设置为

   https://storage.googleapis.com/

   。
2. 更改我的 Google Cloud Storage 存储桶的设置，以便它接受来自

   https://example.com

   的请求。

Answer 1

解决方案遵循此示例。首先，使用 CORS 配置创建一个 JSON 文件：

[
    {
      "origin": ["https://example.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

然后运行以下命令：

gcloud storage buckets update gs://BUCKET_NAME --clear-cors

感谢 Doug Stevenson 为我指明了正确的方向。