OIDC+PKCE授权码流对接Azure AD时/token端点遇CORS错误

嘿，这个问题我之前帮不少开发者排查过，咱们一步步来拆解：

首先，你遇到的CORS限制其实是Azure AD的安全设计——/oauth2/token端点默认不允许前端直接发起跨域AJAX请求，除非你的应用注册和配置完全符合SPA的要求。

核心原因：你的调用方式或应用配置不对 #

你提到用授权码流+PKCE，这确实是SPA的标准推荐方案，但这里有个关键：你不应该手动调用/oauth2/token端点。正规的OIDC客户端库（比如angular-oauth2-oidc）会自动处理授权码的交换流程，这个过程的请求是被Azure AD允许的，不会触发CORS。如果是你自己写AJAX请求去调这个端点，肯定会被拦截。

具体解决步骤 #

1. 确认你的Azure AD应用是SPA类型 #

登录Azure门户，找到你的应用注册：

• 进入「概述」页面，检查「平台类型」是否为单页应用(SPA)。如果是Web应用类型，赶紧重新注册成SPA——Web应用的token端点不支持前端跨域请求，只有SPA类型的应用配置后才会开放这个权限。

2. 正确配置允许的源（Allowed Origins） #

在应用注册的「Authentication」页面：

• 找到「单页应用(SPA)」的配置区块，点击「添加URI」
• 输入你的前端地址，比如http://localhost:4200（注意不要加结尾的斜杠！）
• 保存配置后，耐心等5-10分钟让Azure同步配置（这个延迟很容易被忽略）

3. 检查OIDC客户端的配置 #

确保你的Angular OIDC库用的是正确的端点和流程：

• 用Azure AD v2.0端点（推荐）：授权端点是https://login.microsoftonline.com/{你的租户ID}/oauth2/v2.0/authorize，token端点是https://login.microsoftonline.com/{你的租户ID}/oauth2/v2.0/token
• 开启PKCE（大多数主流OIDC库默认会开启，比如angular-oauth2-oidc的enablePkce设为true）
• 回调地址（Redirect URI）必须和你在Azure里配置的完全一致

4. 让OIDC库处理token交换 #

删除你手动调用/oauth2/token的代码，依赖OIDC库的内置方法（比如login()或codeFlow()）来完成授权流程。库会自动处理重定向获取授权码，然后在后台完成token交换——这个过程的请求是被Azure AD允许的，不会触发CORS。

额外提醒 #

• 如果你还在使用v1.0端点，建议切换到v2.0，它对SPA的支持更完善
• 本地测试时，不要用localhost:4200/（带斜杠）作为允许的源，必须是http://localhost:4200

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