Google Cloud Storage直传遭遇CORS跨域错误排查求助

问题场景 #

通过Ruby on Rails ActiveStorage生成Google Cloud Storage（GCS）直传链接，在Next.js前端用fetch发起PUT请求时触发CORS错误：

• Chrome提示：

从源 'http://localhost:8080' 获取 'https://storage.googleapis.com//?GoogleAccessId=<ACCESS_ID>&Expires=1678985734&Signature=' 的请求被CORS策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'标头。

• Safari提示：

Origin http://localhost:8080 不被Access-Control-Allow-Origin允许。状态码：200

当前已配置GCS存储桶CORS策略：

[
  {
    "origin": ["http://localhost:8080"],
    "method": ["GET", "PUT"],
    "responseHeader": ["Origin", "Content-Type", "Content-MD5", "Content-Disposition"],
    "maxAgeSeconds": 3600
  }
]

已通过gcloud storage buckets describe gs://<BUCKET_NAME> --format="default(cors)"确认配置生效，前端直传代码如下：

const directUpload = async (directUpload: DirectUpload) => {
  const response = await fetch(directUpload.url, {
    method: 'PUT',
    headers: JSON.parse(directUpload.headers),
    body: file,
  });

  return response;
}

PUT请求返回403，且响应头无Access-Control-Allow-Origin。

已尝试无效方案 #

• 将CORS策略origin改为["*"]
• 改用XMLHttpRequest替代fetch
• 查阅GCS官方CORS故障排查文档并尝试相关建议

排查与解决步骤 #

1. 修正直传链接路径
   注意到直传链接存在路径错误：https://storage.googleapis.com//?GoogleAccessId=...中域名后有两个斜杠，缺少具体的存储桶和对象路径。ActiveStorage生成的直传URL应指向完整对象路径（如https://storage.googleapis.com/<BUCKET_NAME>/<OBJECT_KEY>?...），路径错误会导致GCS无法匹配对应CORS策略，返回403且不带CORS响应头。需排查Rails端ActiveStorage配置，确保生成的URL包含正确的存储桶和对象路径。

2. 验证签名URL权限
   403错误可能源于签名URL权限不足，确认ActiveStorage生成签名URL时已包含PUT权限，且签名的有效期、存储桶/对象路径与请求完全一致。可直接用curl发起PUT请求测试签名URL，排除前端CORS之外的权限问题。

3. 扩展CORS响应头范围
   尝试在CORS策略的responseHeader中覆盖所有可能的请求头，测试后再逐步缩小范围：

   [
     {
       "origin": ["http://localhost:8080"],
       "method": ["GET", "PUT"],
       "responseHeader": ["*"],
       "maxAgeSeconds": 3600
     }
   ]
   

   也可通过浏览器开发者工具查看预检请求的Access-Control-Request-Headers，确保这些头都被包含在CORS配置的responseHeader列表中。

4. 确认CORS配置完全生效
   GCS的CORS配置更新可能存在延迟，即使gcloud命令显示配置已更新，也可等待几分钟后再测试，或重新上传配置：

   gcloud storage buckets update gs://<BUCKET_NAME> --cors-file=cors-config.json
   

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