Google Cloud Run部署站点访问GCS资源遇CORS跨域问题求助

方案选择分析 #

• 方案1不可行：浏览器的Origin请求头是由浏览器自动生成的安全字段，跨域请求时无法通过前端代码手动修改或覆盖。Chrome和Safari在跨域加载资源时会自动发送当前页面的Origin，这是浏览器的安全机制，无法绕过。
• 方案2是标准解法：通过配置GCS存储桶的CORS规则，允许你的网站域名（如https://example.com）跨域访问资源，完全符合浏览器安全规范。

具体实现步骤 #

方法1：用gcloud命令行配置 #

1. 创建JSON格式的CORS配置文件（例如命名为cors-config.json）：

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

• origin：填写你的网站域名，支持多个域名，比如["https://example.com", "https://www.example.com"]
• method：加载资源只需配置GET方法即可
• responseHeader：按需设置允许返回的响应头
• maxAgeSeconds：浏览器缓存CORS规则的时长，单位为秒

2. 执行命令将配置应用到目标存储桶：

gcloud storage buckets update gs://<你的存储桶名称> --cors-file cors-config.json

方法2：通过Google Cloud控制台配置 #

1. 进入Google Cloud控制台的Cloud Storage > 存储桶页面，选中你的目标存储桶
2. 切换到权限标签页，点击页面底部的更多选项，选择CORS配置
3. 在编辑器中粘贴上述JSON配置内容，点击保存

验证配置生效 #

配置完成后，用curl命令测试：

curl -H "Origin: https://example.com" -v "https://storage.googleapis.com/<你的存储桶名称>/bcf8ff28514bad926b0c.png"

查看响应头是否包含Access-Control-Allow-Origin: https://example.com，存在则说明配置生效。

内容的提问来源于stack exchange，提问作者Edgar Derby