Angular应用使用Msal.js获取Azure密钥保管库密钥时遇CORS错误

问题原因 #

Azure Key Vault的REST API出于安全设计，默认不允许浏览器端发起跨域请求。Postman属于非浏览器环境的客户端，不受浏览器CORS策略限制，因此能正常调用；而Angular运行在浏览器中，浏览器会自动触发CORS预检请求，Key Vault服务器拒绝该请求，最终导致报错。

解决方案 #

方案1：通过后端代理转发请求（推荐） #

密钥管理属于敏感操作，前端直接调用Key Vault API会暴露访问令牌，存在泄露风险，因此推荐通过后端服务中转请求：

示例：Node.js Express后端代理

const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;

// 后端提供的密钥查询接口
app.get('/api/get-secret/:secretName', async (req, res) => {
  const secretName = req.params.secretName;
  const keyVaultUrl = `https://denemekeyvault.vault.azure.net/secrets/${secretName}?api-version=7.4`;
  
  // 后端通过Azure SDK/MSAL获取合法访问令牌
  const token = await getBackendAccessToken(); 
  
  try {
    const response = await axios.get(keyVaultUrl, {
      headers: { 'Authorization': `Bearer ${token}` }
    });
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || '请求失败');
  }
});

app.listen(port, () => {
  console.log(`代理服务运行在端口 ${port}`);
});

Angular前端修改调用逻辑

public getSecret(secretName: string): void {
  const proxyUrl = `http://localhost:3000/api/get-secret/${secretName}`;
  
  this.http.get(proxyUrl).subscribe(
    response => console.log(response),
    error => console.error('获取密钥失败:', error)
  );
}

方案2：配置Key Vault的CORS规则（仅测试/非生产环境） #

若因特殊场景需前端直接调用，可在Azure门户配置CORS规则：

• 进入目标Key Vault的设置 -> CORS
• 添加Angular应用的域名（如http://localhost:4200）
• 允许的方法勾选GET，允许的请求头添加Authorization
• 保存配置

注意：此方式存在令牌泄露风险，严禁在生产环境使用。

内容的提问来源于stack exchange，提问作者Süleyman Türker Güner