GCS使用GenerateSignedPostPolicyV4上传时fetch/XHR触发CORS错误问询

1. Post Policy上传不需要使用HTML表单 #

你完全可以通过fetch/XHR构造multipart/form-data请求实现上传，不需要依赖原生HTML表单提交，content-length-range的文件大小限制规则会正常生效。

2. CORS错误原因 #

你遇到的CORS报错是因为CORS配置缺失allowedHeaders字段导致的：

• 原生HTML表单提交不属于AJAX跨域请求范畴，不会触发CORS预检，所以之前可以正常提交
• fetch/XHR发起的跨域POST请求会先发送OPTIONS预检请求，GCS会校验请求头是否匹配存储桶CORS规则中的allowedHeaders配置
• 你当前的CORS配置仅声明了允许的响应头，没有允许Post Policy请求携带的x-goog-*等自定义请求头，因此预检请求被拦截

3. 修复方案 #

步骤1：更新存储桶CORS配置 #

新增allowedHeaders配置，允许自定义请求头：

[
  {
    "maxAgeSeconds": 3600,
    "method": ["PUT", "POST"],
    "origin": ["*"],
    "responseHeader": ["Content-Type", "Access-Control-Allow-Origin"],
    "allowedHeaders": ["Content-Type", "x-goog-*"]
  }
]

配置更新后需要等待1-2分钟生效。

步骤2：用fetch构造上传请求 #

注意所有policy要求的表单字段必须放在file字段之前，且不要手动设置Content-Type请求头，浏览器会自动生成带正确boundary的请求头：

async function uploadGcsFile(file, policyConfig) {
  const formData = new FormData()
  // 按顺序添加policy指定的所有隐藏字段
  formData.append('content-type', 'application/octet-stream')
  formData.append('key', policyConfig.key)
  formData.append('policy', policyConfig.policy)
  formData.append('x-goog-algorithm', 'GOOG4-RSA-SHA256')
  formData.append('x-goog-credential', policyConfig.credential)
  formData.append('x-goog-date', policyConfig.date)
  formData.append('x-goog-signature', policyConfig.signature)
  // file字段必须放在所有其他字段之后
  formData.append('file', file)

  const res = await fetch(`https://storage.googleapis.com/${policyConfig.bucket}/`, {
    method: 'POST',
    body: formData
  })

  if (res.ok) {
    return res
  }
  throw new Error('上传失败: ' + await res.text())
}

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