使用 fetch 在启用通配符 CORS 的 gcs 存储桶上获取 CORS 问题答案

【问题标题】：Getting CORS issue on wildcard CORS enabled gcs bucket with fetch使用 fetch 在启用通配符 CORS 的 gcs 存储桶上获取 CORS 问题
【发布时间】：2021-06-30 05:35:22
【问题描述】：

我有一个存储在 Google Cloud Storage 中的公开可用文件，并且在使用 fetch 从 SPA 检索资源时遇到问题。假设存储桶名称为 pub-bucket，完整资源 URL 为 https://storage.googleapis.com/pub-bucket/v1/example.mid。我已经为存储桶使用以下 JSON 配置启用了 CORS

[
    {
      "origin": ["*"],
      "method": ["GET"]
    }
]

但我仍然收到相同的 CORS 错误 Access to fetch at 'https://storage.googleapis.com/pub-bucket/v1/example.mid' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 我不确定是否配置错误，因为以前我使用具有相同 CORS 配置的 DO Spaces 并且从未见过此问题。我还尝试使用this 答案中提到的更多选项扩展我的 CORS 配置，但没有任何改变。

【问题讨论】：

标签： cors fetch google-cloud-storage

【解决方案1】：

事实证明，这个问题是由于 Google 没有明确定义可以使用 CORS 访问哪些端点。资源 https://storage.googleapis.com/[YOUR-BUCKET]/[OBJECT-PATH] 的此 URI 版本不允许允许 CORS 访问，而 https://[YOUR-BUCKET].storage.googleapis.com/[OBJECT-PATH] 允许。

【讨论】：

你好，加勒特。我能够使用这两个 xml 端点发出 CORS 请求。事实上，我已经能够成功地测试 [1] 中的行为。也许您受到Max-Age 默认值1 小时[2] 的影响。您是否尝试过再次使用端点https://storage.googleapis.com/[YOUR-BUCKET]/[OBJECT-PATH]？。
[1] cloud.google.com/storage/docs/cross-origin#server-side-support [2] cloud.google.com/storage/docs/cross-origin#cors-elements
我遇到了完全相同的问题，Garrett 的解决方案解决了它！我跑了gsutil cors set <( echo '[{ "origin": ["*"], "method": ["GET"] }]' ) gs://MY-BUCKET，但继续收到https://storage.googleapis.com/[MY-BUCKET]/[OBJECT-PATH] 的愚蠢CORS 错误。切换到https://[MY-BUCKET].storage.googleapis.com/[OBJECT-PATH] 修复了它。