为何调用Azure Key Vault时出现No-cors policy错误？

核心原因 #

Azure Key Vault的官方REST API不允许从浏览器前端直接发起跨域请求，微软从安全角度限制了这一行为——直接在前端调用Key Vault会导致敏感的密钥访问逻辑暴露，同时Key Vault服务本身没有配置支持前端域名的CORS规则，所以浏览器会拦截请求，抛出你看到的CORS错误。

代码中的额外问题 #

除了CORS的本质限制，你的代码还有两处明显问题：

• 权限范围错误：你请求的scopes是user.read这类Microsoft Graph的权限，没有包含Key Vault的访问权限，正确的范围应该是https://vault.azure.net/.default，不过即使改了范围，CORS问题依然存在，因为前端调用本身就不被允许。
• 语法错误：useEffect的顶层直接使用await，这会触发语法报错，await必须放在async函数内部。

正确实现方式 #

不要直接在React前端调用Key Vault API，而是通过后端代理实现：

• 搭建后端服务（如Azure Functions、Node.js后端、ASP.NET Core等）
• 在后端配置Key Vault的访问权限（使用服务主体或托管身份）
• 前端调用自己的后端接口，由后端请求Key Vault获取密钥后返回给前端

若要使用Azure前端生态，也可考虑用Azure Static Web Apps搭配API函数，或者在后端而非前端初始化@azure/keyvault-secrets客户端。

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