Backblaze CORS在localhost环境下无法正常工作的问题求助

操作背景 #

参照相关指导配置Backblaze B2存储桶CORS规则后，前端分别使用S3Client和backblaze-b2包尝试文件上传，均触发跨域错误。

已配置的CORS规则 #

rules.json配置内容 #

[
    {
        "corsRuleName": "downloadFromAnyOriginWithUpload",
        "allowedOrigins": ["*"],
        "allowedHeaders": [
            "authorization",
            "content-type",
            "x-bz-file-name",
            "x-bz-content-sha1"
        ],
        "allowedOperations": [
            "b2_download_file_by_id",
            "b2_download_file_by_name",
            "b2_upload_file",
            "b2_upload_part"
        ],
        "maxAgeSeconds": 3600
    }
]

规则更新结果验证 #

执行命令 ./b2-windows.exe update-bucket --cors-rules "$(cat rules.json)" private-bucket2 后，返回结果显示规则已正确生效：

{
    "accountId": "5c83d2c9fb2a",
    "bucketId": "d51c58c36d022cb98ffb021a",
    "bucketInfo": {},
    "bucketName": "private-bucket2",
    "bucketType": "allPrivate",
    "corsRules": [
        {
            "allowedHeaders": [
                "authorization",
                "content-type",
                "x-bz-file-name",
                "x-bz-content-sha1"
            ],
            "allowedOperations": [
                "b2_download_file_by_id",
                "b2_upload_part",
                "b2_upload_file",
                "b2_download_file_by_name"
            ],
            "allowedOrigins": ["*"],
            "corsRuleName": "downloadFromAnyOriginWithUpload",
            "exposeHeaders": null,
            "maxAgeSeconds": 3600
        }
    ],
    "defaultRetention": {"mode": null},
    "defaultServerSideEncryption": {"mode": "none"},
    "isFileLockEnabled": false,
    "lifecycleRules": [],
    "options": ["s3"],
    "replication": {
        "asReplicationDestination": null,
        "asReplicationSource": null
    },
    "revision": 16
}

前端代码尝试及错误情况 #

1. 使用AWS S3Client上传 #

// 前端执行代码
const s3 = new S3Client({
    endpoint: 'https://s3.us-east-005.backblazeb2.com',
    region: 'us-east-005',
    credentials: {
        accessKeyId: "5c83d2c9fb2a",
        secretAccessKey: "0058d9a7de2103531f2f28e402f4bd5e7ad68d054c"
    }
});

const x = await s3.send(new PutObjectCommand({
    Bucket: "private-bucket2",
    Key: "my-filename.jpg",
    Body: blob
}));

触发跨域错误：

2. 使用backblaze-b2包尝试 #

// 前端执行代码
import B2 from "backblaze-b2";
const b2 = new B2({
    applicationKeyId: '5c83d2c9fb2a',
    applicationKey: '0058d9a7de2103531f2f28e402f4bd5e7ad68d054c'
});
await b2.authorize();

同样触发跨域错误：

相关请求截图 #

• 实际请求：
• 预检请求：

问题分析与解决办法 #

1. 补充CORS规则中的请求头 #

从预检请求截图可见，浏览器发起的OPTIONS请求包含x-amz-content-sha256、x-amz-date等额外请求头，当前规则未允许这些头，需更新allowedHeaders：

"allowedHeaders": [
    "authorization",
    "content-type",
    "x-bz-file-name",
    "x-bz-content-sha1",
    "x-amz-content-sha256",
    "x-amz-date",
    "x-amz-security-token"
]

测试环境可直接用"*"允许所有请求头，生产环境需按需配置。

2. 采用安全的上传流程（避免前端暴露密钥） #

前端硬编码账号密钥存在严重安全风险，正确流程为：

• 后端调用b2_get_upload_url和b2_get_upload_part_url获取上传地址与授权令牌
• 将地址和令牌返回给前端，前端直接向该地址发起PUT请求上传文件，无需携带账号密钥

3. 确认S3兼容模式的Endpoint格式 #

使用S3Client时，需使用存储桶专属Endpoint：https://private-bucket2.s3.us-east-005.backblazeb2.com，而非全局Endpoint。

4. 清除浏览器缓存 #

浏览器可能缓存旧的CORS规则，更新后需清除缓存或使用无痕模式测试。

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