Cloudflare R2本地localhost:3000上传文件CORS问题求助

1. 核对R2 Bucket的CORS配置 #

• 必须明确包含PUT方法，很多人容易忽略这一点，参考正确配置：

[
  {
    "AllowedOrigins": ["http://localhost:3000"],
    "AllowedMethods": ["PUT"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"]
  }
]

• 一定要加上ExposeHeaders: ["ETag"]，客户端上传后通常需要验证返回的ETag，缺失这个配置会导致预检或后续请求报错。

2. 检查预签名URL的生成逻辑 #

• 后端用Amazon SDK生成URL时，务必指定PUT方法，且不要额外添加未在CORS中允许的自定义请求头。
• 生成URL时如果指定了Content-Type等头，客户端上传时必须严格匹配这些头，否则签名验证失败也会触发类似CORS的错误。

3. 修正客户端上传代码 #

• 上传时不要随意添加多余请求头，只保留预签名URL中已签名的头，示例代码：

const uploadToR2 = async (presignedUrl, file) => {
  try {
    const res = await fetch(presignedUrl, {
      method: 'PUT',
      body: file,
      // 不要添加未在预签名中定义的头，比如Content-Type如果没签就别加
    });
    if (res.ok) {
      console.log('上传成功');
    }
  } catch (err) {
    console.error('上传失败', err);
  }
};

4. 排查Cloudflare侧的额外限制 #

• 确认R2 Bucket没有绑定拦截请求的Cloudflare Workers，若有需确保规则允许http://localhost:3000的PUT请求。
• 检查预签名URL的有效期，过期URL会直接报错，别把这个锅甩给CORS。

5. 用浏览器工具分析预检请求 #

• 打开浏览器开发者工具的Network面板，查看OPTIONS预检请求的响应头：
  • 确认Access-Control-Allow-Origin是http://localhost:3000
  • 确认Access-Control-Allow-Methods包含PUT
  • 确认Access-Control-Allow-Headers和你请求里的头完全匹配
• 预检请求失败的话，直接根据响应头的提示调整CORS配置即可。

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