React应用生成Azure Blob SAS令牌报错：请求URI查询参数无效

核心问题分析 #

• 代码逻辑完全错误：SAS令牌不是通过向存储账户根地址发送GET请求生成的，而是需要用存储账户密钥对指定的权限、有效期等参数进行HMAC-SHA256签名计算得到的。直接请求你构建的地址，不符合Blob存储的API规范，必然返回400错误。
• 前端生成SAS令牌存在重大安全风险：如果在React前端代码里嵌入存储账户密钥（你代码里的<signinkey>），会直接泄露给所有访问页面的用户，导致存储账户被恶意操作。

正确实现方式 #

1. 后端生成SAS令牌：
   在后端服务（如Node.js、.NET、Python等）中使用Azure存储SDK生成SAS令牌，示例（Node.js）：

   const { BlobServiceClient } = require("@azure/storage-blob");
   const accountName = "你的存储账户名";
   const accountKey = "你的存储账户密钥";
   
   async function generateSASToken() {
     const blobServiceClient = BlobServiceClient.fromConnectionString(`DefaultEndpointsProtocol=https;AccountName=${accountName};AccountKey=${accountKey}`);
     const containerClient = blobServiceClient.getContainerClient("你的容器名");
     // 生成容器级SAS令牌
     const sasToken = await containerClient.generateSasUrl({
       expiresOn: new Date(new Date().valueOf() + 3600 * 1000), // 1小时有效期
       permissions: "rwdlacupiytfx"
     });
     return sasToken;
   }
   

   前端通过调用后端接口获取生成好的SAS令牌即可。

2. 修复前端请求逻辑：
   前端拿到后端返回的SAS令牌后，用来访问具体的Blob资源（容器、Blob文件），示例：

   async function fetchBlobData() {
     // 调用后端接口获取SAS令牌
     const response = await axios.get("/api/generate-sas-token");
     const sasToken = response.data;
     // 用SAS令牌访问目标容器或Blob
     const blobUrl = `https://${accountname}.blob.core.windows.net/你的容器名?${sasToken.split("?")[1]}`;
     try {
       const blobResponse = await axios.get(blobUrl);
       console.log(blobResponse.data);
       console.log('SUCCESS');
     } catch (error) {
       console.log('FAIL');
       console.error(error);
     }
   }
   

3. 现有参数排查点：
   如果要排查当前400错误的参数问题，需确保：

   • sv（服务版本）是有效的Azure存储服务版本号
   • se（过期时间）必须晚于st（开始时间），且格式符合ISO 8601标准
   • sig参数是用存储账户密钥对其他所有SAS参数进行HMAC-SHA256计算后，再做URL编码的结果，不能直接用密钥占位符

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