如何使用Blob专属SAS Token通过@azure/storage-blob实现浏览器端文件上传

核心问题根源 #

你出现报错的核心原因是混淆了不同层级SAS的权限范围，以及做了不必要的账户级操作：

• Blob专属SAS的权限仅覆盖单个指定Blob，没有权限操作存储账户、容器级别的资源
• setCors是存储账户级别的配置操作，仅需在Azure门户/存储账户管理侧配置一次即可，完全不需要在前端上传逻辑中调用，前端也没有对应的操作权限

正确实现步骤 #

1. 删除所有setCors相关的前端代码，提前在存储账户的CORS配置页完成规则配置即可
2. 不需要初始化BlobServiceClient、ContainerClient，直接用完整的Blob带SAS URL初始化BlockBlobClient即可操作目标Blob

示例代码 #

// 拼接完整的Blob访问URL：存储地址+容器名+文件名+Blob专属SAS
const blobFullUrl = `https://${storageName}.blob.core.windows.net/${containerName}/${fileName}${sasToken}`;
// 直接初始化Blob客户端，不需要经过服务、容器层
const blobClient = new BlockBlobClient(blobFullUrl);

// 后续直接调用对应的Blob操作方法即可
const exists = await blobClient.exists();
console.log('Exists', exists);

const options: BlockBlobParallelUploadOptions = { blobHTTPHeaders: { blobContentType: file.type } };
await blobClient.uploadBrowserData(file, options);

原有报错原因说明 #

• 用Blob SAS初始化BlobServiceClient后调用getProperties报错403：该操作是存储账户级操作，Blob SAS无对应权限
• 把完整Blob URL传给BlobServiceClient报错资源不支持HTTP动词：BlobServiceClient仅接收存储服务根URL，传入具体Blob地址会导致接口请求路径错误
• 只读账户SAS访问exists报错403：只读SAS没有对应Blob的查询/写入权限，且你不需要使用账户级SAS，用Blob专属SAS即可满足最小权限要求

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