Azure AD保护的Logic App令牌请求触发CORS错误的解决咨询

问题根源 #

你当前使用的**客户端凭据流（Client Credentials Flow）**是为后端服务设计的，完全不适合前端（如Angular）直接调用：

1. 微软的login.microsoftonline.com/token端点本身就不允许前端跨域请求，因此必然触发CORS错误；
2. 你把client_secret硬编码在前端代码里，这是严重的安全漏洞，任何人都能通过查看源码获取你的密钥。

另外，你在请求头里添加Access-Control-Allow-Origin: *是无效的——这个是服务器响应头，只有服务端返回该头才能解决CORS，前端请求时添加这个头没有任何作用。

解决方法 #

方法一：改用前端标准认证流程（推荐）

使用授权码流+PKCE（Authorization Code Flow with PKCE），这是SPA应用的官方推荐认证方式：

• 在Azure AD应用注册中，进入「平台配置」，添加「单页应用（SPA）」类型，把你的Web App域名（https://my-web-app.azurewebsites.net）加入允许的源；
• 在Angular项目中使用MSAL.js库（微软官方认证库）处理令牌的获取、刷新，无需手动调用token端点；
• 用MSAL获取到的访问令牌，直接调用受Azure AD保护的Logic App。

方法二：后端代理令牌请求

如果必须使用客户端凭据流，需要把令牌获取逻辑移到后端：

• 在你的Azure Web App后端新增一个API接口（比如/api/get-token）；
• 后端接口内部调用login.microsoftonline.com/token端点获取令牌，这里不会有CORS问题；
• 前端调用自己后端的这个接口，获取令牌后再调用Logic App；
• 确保client_secret只保存在后端配置中，绝不暴露给前端。

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