ReactJS做可恢复上传到Google Cloud时传空文件出现CORS错误如何解决

核心问题根因 #

你遇到的CORS错误本质不是跨域配置问题，是空文件上传时构造的请求头不符合GCS可恢复上传规范导致请求被拦截，触发了跨域报错：

• Access-Control-Allow-Origin是服务端响应头，你在客户端请求头添加这个字段完全无效，反而可能因为添加了未被GCS CORS规则允许的请求头，触发预检请求失败。
• 你的请求头里Content-Range: bytes 0--1/0格式错误，不符合HTTP Range规范，也不符合GCS空文件可恢复上传的要求，这是触发错误的核心原因。
• 只有空文件会触发错误是因为正常非空文件的分片Range计算逻辑不会出现这种非法格式，空文件时你的Range计算逻辑出错生成了无效值。

对应的报错截图如下：

你上传时的请求头参考：

:authority: storage.googleapis.com
:method: PUT
:path: /sms-local-bucket/3f9e2365-8d03-40e2-9635-a3d1860a7f23/8a70f7a3-59ff-4d36-b0ce-8e32efe55493?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=sfs-local%40revbits-sfs-local.iam.gserviceaccount.com%2F20211029%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20211029T034429Z&X-Goog-Expires=61&X-Goog-SignedHeaders=content-type%3Bhost%3Bx-goog-resumable&X-Goog-Signature=0def04860fcda4d9c316544eef3482491e4f70cd4f9e397fe282b03a728b9f91465f3669f616e5e6fde72a765ca872624ed3d2ff60f5fa3735cabc03d640e409e2240a58229e23ee882e37998c038ca1c9b8e47dbc38765a9056b2c14268bcbf6595d21a9056b5df1b8808a5fde0d83b9b2d815482a073c8ca7662c872aa01a6884baea466cacf05c2b39c09ab1d0b7838b31f7c96d7f4c470fcff4cc753d5cc00122077d1cbbfb40ce715644a6c85a53c68349b8d7831a31cd3f8006840658a9516209d1f128d84c34961597ec148992caf5e3b4e141144632bd2a5b82528d127a3816840ebb063de8376ee1fc9c3a70894057e9adab9ff58b7de4e99d23f09&upload_id=ADPycdtHTqXlDLRx1GxLY6W3FsJHuxT0VJJNqtdPpQ3DxlfS8TvCeTjOFhDSTQCsrb2VMGgnAER1CPNOStNV2Uus4WSTJpzsGQ
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8
access-control-allow-origin: *
content-length: 0
content-range: bytes 0--1/0
content-type: application/octet-stream
origin: http://localhost:3000
referer: http://localhost:3000/
sec-ch-ua: "Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
x-client-data: CJG2yQEIorbJAQipncoBCO/yywEInvnLAQjnhMwBCPqEzAEItYXMAQjLicwB
Decoded:
message ClientVariations {
  // Active client experiment variation IDs.
  repeated int32 variation_id = [3300113, 3300130, 3313321, 3340655, 3341470, 3342951, 3342970, 3343029, 3343563];
}

修复步骤 #

1. 删除所有客户端手动添加的Access-Control-Allow-Origin请求头，避免多余请求头导致预检失败。
2. 调整空文件的上传逻辑：
   • 检测到文件大小为0时，Content-Range头填写为bytes */0，保持Content-Length为0即可。
   • 也可以针对空文件跳过可恢复上传逻辑，直接使用普通PUT请求上传，不需要携带upload_id等分片参数，避免格式校验问题。
3. 确认你的GCS存储桶已经配置了正确的CORS规则，规则中需要允许PUT请求、允许content-type、x-goog-resumable等你用到的请求头，开发环境下要允许http://localhost:3000作为来源域。

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