如何通过CLI更新Backblaze B2的corsRules及解决跨域阻塞问题

1. 修正Backblaze B2存储桶的CORS规则 #

跨域问题的核心是B2存储桶的CORS规则配置不正确，先解决这个问题：

通过CLI正确设置CORS规则 #

你之前的CLI命令错误是因为JSON格式不规范，必须使用严格的JSON语法（双引号包裹键和字符串）。执行以下命令，替换为你的实际信息：

b2 update-bucket --corsRules '[
  {
    "corsRuleName": "github-pages-upload",
    "allowedOrigins": ["https://你的用户名.github.io"],
    "allowedOperations": ["b2_upload_file"],
    "allowedHeaders": ["Authorization", "X-Bz-File-Name", "X-Bz-Content-Sha1", "Content-Length", "X-Bz-Info-Author", "Content-Type"],
    "exposeHeaders": ["X-Bz-File-Id", "X-Bz-File-Name"],
    "maxAgeSeconds": 3600
  }
]' 你的存储桶名称 allPrivate

如果命令行转义麻烦，可将规则写入cors-config.json文件，再执行：

b2 update-bucket --corsRules "$(cat cors-config.json)" 你的存储桶名称 allPrivate

通过B2控制台设置CORS规则 #

如果CLI操作仍有问题，直接在B2控制台配置：

• 进入目标存储桶详情页，找到「CORS Rules」选项
• 添加规则：
  • Rule Name：自定义名称（如github-pages-upload）
  • Allowed Origins：填写你的GitHub Pages完整域名（如https://xxx.github.io）
  • Allowed Operations：勾选b2_upload_file
  • Allowed Headers：填入Authorization,X-Bz-File-Name,X-Bz-Content-Sha1,Content-Length,X-Bz-Info-Author,Content-Type
  • Expose Headers：填入X-Bz-File-Id,X-Bz-File-Name
  • Max Age Seconds：设置为3600

2. 修正前端上传代码的错误 #

你的前端代码存在两个关键问题，会导致CORS验证或上传失败：

错误1：请求体格式错误 #

B2的直接上传接口接受原始二进制文件，而非JSON对象。将请求体改为直接传入文件：

// 移除原来的body对象，直接传入myPicture
const uploadPicRes = await axios.post(url, myPicture, { headers });

错误2：多余请求头与缺失必要头 #

• 移除客户端请求中的Access-Control-Allow-Credentials（这是服务器响应头，不是客户端发送的）
• 补充Content-Type头，同时编码文件名避免特殊字符问题：

const headers = {
  Authorization: authToken,
  "X-Bz-File-Name": encodeURIComponent(res.dt.picName), // 编码文件名
  "Content-Length": myPicture.size, // 使用原始文件的尺寸
  "X-Bz-Content-Sha1": hash,
  "X-Bz-Info-Author": "unknown",
  "Content-Type": myPicture.type // 添加文件类型头
};

3. 验证规则生效 #

设置完成后等待1-2分钟（B2规则可能有延迟），再测试上传。若仍报错，通过浏览器开发者工具「Network」面板检查：

• 查看OPTIONS预请求的响应头，确认Access-Control-Allow-Origin匹配你的GitHub Pages域名
• 确认Access-Control-Allow-Headers包含你发送的所有请求头

备选方案：后端代理上传 #

若以上方法仍无效，可改用后端代理方式：

1. 前端将图片发送到你的Node/Express后端
2. 后端接收后转发至B2的uploadUrl
3. 后端配置CORS允许GitHub Pages域名，前端仅与自有后端通信，规避直接跨域问题

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