Angular本地获取授权令牌调用.NET Core API遇CORS错误排查

以下是按出现概率从高到低排序的排查方向：

1. Azure AD应用注册的平台配置错误 #

这是该类问题最高发的原因：

• 注册用于Angular前端的AAD应用时，平台类型必须选择单页应用(SPA)，不能选「Web」「公共客户端(移动和桌面)」。如果平台类型选错，AAD的token端点不会返回跨域响应头，浏览器会直接拦截请求。
• 本地开发地址必须精确添加到SPA平台的重定向URI列表中：比如Angular默认本地启动地址是http://localhost:4200，就必须完整填写该地址，不能漏端口、不能省略http前缀、不能使用通配符，AAD完全不支持重定向URI配置通配符。
• 如果配置的是委托权限，提前确认对应权限已经完成管理员/用户同意，未授权的情况下token请求被拦截时也可能抛出CORS类报错。

2. 前端获取Token的实现逻辑错误 #

• 不要在Angular中直接用HttpClient向AAD的token端点发POST请求拼参数拿token：AAD的token端点本身不支持SPA源的跨域直连请求，SPA场景必须使用官方MSAL Angular库走带PKCE的授权码流程，通过浏览器重定向/弹窗的交互完成授权拿token，自行构造POST请求的方式必然触发跨域。
• 如果已经在使用MSAL库，检查初始化配置中的redirectUri值，必须和AAD后台配置的重定向URI完全一致，末尾多一个斜杠、http/https写错都会导致校验失败触发跨域拦截。
• 不要尝试通过自建CORS代理的方式绕开AAD的跨域校验，鉴权请求走代理会存在Access Token泄露的风险，且该方案完全无法在生产环境使用。

3. 排查方向混淆：不要提前修改API侧配置 #

当前触发的CORS错误发生在Angular到AAD端点这一跳，和.NET Core API侧的配置没有关系：

• 不需要提前修改.NET Core API的CORS策略来解决这个问题，API侧的CORS配置只负责管控Angular到API的请求，无法干预浏览器到AAD的请求校验，提前修改API配置属于无效操作。
• 等前端可以正常拿到有效Access Token之后，再去API侧做两项配置即可：一是添加JWT Bearer认证服务校验token合法性，二是配置CORS策略允许Angular应用的源，同时策略要显式允许Authorization请求头，避免后续带token调用API时被跨域拦截。

4. 本地开发环境的特殊问题 #

• 如果本地调试用了自定义域名（比如修改hosts文件将本地服务绑定到非localhost的域名），必须把该自定义域名也添加到AAD的SPA重定向URI列表中，且本地服务的HTTPS证书必须被系统信任，否则AAD不会返回合法的跨域头。
• 排查浏览器插件影响：广告拦截、隐私防护类插件会篡改发往AAD的请求头，导致跨域校验失败，可以打开浏览器无痕模式禁用所有插件后重试，排除插件干扰。

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