React+Express应用使用passport-azure-ad时CORS错误如何解决

先明确两个核心事实：

• 你无法在Azure AD侧配置Access-Control-Allow-Origin头，微软官方身份认证端点login.microsoftonline.com本身就不支持跨域XHR/异步请求访问，设计上仅支持全页面跳转走认证流程，不是给前端异步调用设计的。
• 你之前配置后端CORS、把前后端地址都加入Azure重定向URI没有效果，是因为触发报错的跨域请求是前端异步请求自动跳转到微软域名产生的，请求根本没有落到你自己的后端服务上。
  你现在的问题本质是触发认证的方式错了：大概率是在React里用axios/fetch这类异步请求工具调用后端认证接口，后端passport返回302跳转到Azure AD时，浏览器会把这个跳转当成异步请求的后续链路直接发起请求，跨域访问微软域名时就会被CORS策略拦截——异步请求本身就不支持自动跟随跨域302跳转到第三方认证域名。

1. 前端调整认证触发方式 #

• 不要用异步请求触发认证，直接通过浏览器顶层页面跳转访问后端认证入口，可以用普通<a>标签，或者直接修改window.location.href。
  React侧示例代码：

  // 错误写法：用异步请求触发，会触发CORS报错
  // const login = async () => { await axios.get(`${SERVER_URL}/auth/azure`) }
  
  // 正确写法：全页面跳转，不会触发跨域限制
  const login = () => {
    window.location.href = `${SERVER_URL}/auth/azure`
  }
  

• 前端不需要为认证流程额外配置CORS相关请求头，所有认证跳转都是浏览器顶层导航行为，天然不受跨域规则限制。

2. 后端Passport配置调整 #

• 确保OIDCStrategy配置的回调地址和Azure门户注册的重定向URI完全一致，回调路由不需要做特殊CORS处理，正常走passport认证流程即可。
• 认证成功、失败的处理逻辑直接用res.redirect()跳回前端对应页面，不要返回JSON数据给前端异步请求处理。
  后端路由示例：

  // 认证触发路由
  app.get('/auth/azure', passport.authenticate('azuread-openidconnect'))
  
  // Azure AD回调处理路由
  app.get('/auth/azure/callback',
    passport.authenticate('azuread-openidconnect', { failureRedirect: `${FRONTEND_URL}/login-error` }),
    (req, res) => {
      // 认证成功后写入session/认证cookie，跳回前端业务页面
      res.redirect(`${FRONTEND_URL}/dashboard`)
    }
  )
  

• 后端其他给前端调用的业务接口，正常配置cors中间件允许前端域名访问即可，和认证流程不冲突。

3. Azure AD应用注册配置检查 #

• 重定向URI只需要填写你后端的回调地址，也就是${SERVER_URL}/auth/azure/callback即可，不需要添加前端地址——前端地址是你后端认证完成后自主跳转的目标，不属于Azure AD需要感知的回调地址。
• 平台类型选择「Web」即可，不要选「单页应用程序」，当前是后端托管回调的授权码流程，和单页应用的隐式流程/ auth code flow with PKCE配置逻辑不一样。

• 不要尝试给发往微软端点的请求加mode: 'no-cors'配置，这个模式下你无法读取响应内容，根本完不成认证流程。
• 不要尝试写代理转发微软登录页的请求，OIDC流程需要浏览器跳转到微软域名下完成账号密码输入、多因素认证等步骤，代理转发会丢失认证上下文，完全走不通流程。

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