Angular 14上传Azure Blob Storage遭遇CORS跨域问题求助

1. 严格校验生产环境Origin与CORS规则的匹配度 #

Azure Blob Storage的CORS规则对Origin是完全匹配的，需重点排查：

• 生产环境域名是否带www？比如配置的是https://example.com，但实际请求Origin是https://www.example.com，二者不匹配会直接触发CORS错误
• 协议是否一致？确保配置的是https（生产环境通常都是）且实际请求用的也是HTTPS，HTTP和HTTPS属于不同Origin
• 避免多余字符：Allowed Origins里的域名不要加空格、斜杠后缀（比如https://example.com/是错误的，应该写https://example.com）

2. 确认CORS规则的配置有效性 #

• 检查规则是否应用到当前使用的存储账户，不要误操作到其他账户
• 多条CORS规则会按顺序匹配，确保生产环境Origin对应的规则没有被优先级更高的规则覆盖
• 用Azure CLI验证规则是否已生效，避免门户配置未同步：

az storage cors show --account-name your-storage-account --services b

如果查询结果和门户配置不一致，重新保存规则并等待5-10分钟（Azure CORS规则可能存在生效延迟）

3. 检查上传代码的请求构造 #

常见代码问题： #

• 禁止手动设置Origin头：浏览器会自动发送当前页面的Origin，手动添加的自定义Origin会被Azure拒绝
• 确认@azure/storage-blob版本：旧版本可能存在CORS相关bug，建议升级到最新稳定版
• SAS令牌权限校验：如果用SAS上传，确保令牌包含Write权限且未过期，权限不足也可能被伪装成CORS错误

代码示例检查点： #

import { BlobServiceClient, StorageSharedKeyCredential } from '@azure/storage-blob';

async function uploadFile(file: File) {
  const accountName = 'your-storage-account';
  const accountKey = 'your-account-key';
  const containerName = 'your-container';

  const sharedKeyCredential = new StorageSharedKeyCredential(accountName, accountKey);
  const blobServiceClient = new BlobServiceClient(
    `https://${accountName}.blob.core.windows.net`,
    sharedKeyCredential
  );

  const containerClient = blobServiceClient.getContainerClient(containerName);
  const blobClient = containerClient.getBlockBlobClient(file.name);

  // 重点：不要手动设置Origin头
  const uploadOptions = {
    blobHTTPHeaders: {
      blobContentType: file.type
    }
  };

  await blobClient.uploadData(file, uploadOptions);
}

4. 排查生产环境代理/CDN干扰 #

• 如果生产环境使用了CDN或反向代理，需确保代理没有修改或移除Origin头
• 检查CDN规则是否允许Origin头透传到Blob Storage，部分代理会将Origin替换为自身域名，导致Azure无法匹配CORS规则

总结 #

优先确认生产环境Origin与CORS规则的完全匹配，再排查代码中是否存在手动篡改Origin的情况，最后验证代理/CDN的影响。若以上步骤无效，可尝试删除所有CORS规则后重新添加生产环境域名，等待10分钟后再测试。

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