使用Express+React+Passport.js实现Google OAuth2登录 已配CORS仍报跨域错误

你试了所有常规CORS配置都没用的根本原因：把OAuth2的重定向授权流程，和普通业务接口的XHR跨域请求逻辑完全搞混了

• 触发报错的具体逻辑：你在前端用Axios（也就是XMLHttpRequest类型的请求）去访问后端的/auth/google授权入口，这个请求拿到后端返回的、指向Google授权端点的302重定向响应后，Axios会自动跟随重定向直接向accounts.google.com发请求，这时候就变成了从你本地前端源发起的跨域XHR请求
• 你在后端配的所有CORS规则、手动写的OPTIONS预检响应、甚至前端设的代理，全都是作用在自己可控的服务上的；Google的授权服务器根本不会为你http://127.0.0.1:3000这个源返回Access-Control-Allow-Origin响应头，不管你自己这边配置多完善，都绕不过这个跨域校验
• 这套逻辑错配同时影响Google和Facebook的OAuth流程，根本不是第三方接口单独的CORS配置问题

• 彻底删掉前端所有用Axios请求OAuth授权入口的代码
  正确的授权触发方式是普通的浏览器顶层导航：前端登录按钮点击时直接执行window.location.href = '你的后端服务地址/auth/google'。这类顶层页面跳转请求根本不触发CORS校验，完全不需要XHR相关的跨域配置
• 调整后端OAuth路由的配置逻辑，移除套在授权/回调路由上的API类CORS规则
  对/auth/google、/auth/facebook、对应回调路由，只保留Passport的鉴权逻辑：收到授权请求时直接重定向到第三方授权页，回调拿到用户信息后生成会话凭证、直接302重定向回前端页面，不要在这类路由上返回JSON接口数据，也不要强制给路由添加CORS响应头
• 清理多余的无效配置
  • 前端项目里为OAuth流程配置的代理转发规则全部删除：代理会把本来的顶层导航请求转成后端的服务端转发请求，丢失浏览器的请求上下文，反而会破坏OAuth的回调链路
  • 前端Axios的跨域配置只留给登录完成后的业务接口使用：这类接口才需要配置withCredentials、匹配后端的CORS白名单，和OAuth授权流程完全无关
  • 手动编写的OPTIONS预检响应逻辑，只给纯API路径（比如/api/用户信息这类返回JSON的接口）挂载，不要给OAuth路由加预检处理，避免把正常的导航请求错误识别成XHR请求

• 不要尝试用iframe嵌入第三方授权页面：Google、Facebook的授权接口会通过X-Frame-Options头直接拦截这类嵌入请求
• 在Google、Facebook的开放平台控制台配置回调地址时，必须填写你后端的授权回调路径，不要把前端地址配成第三方直接回调的地址，整个跳转链路是：前端页面 → 后端授权入口 → 第三方授权页 → 第三方回调后端接口 → 后端重定向回前端页面
• 不要在OAuth流程的任意环节设置跨域头来“强制允许”请求：这类头只有XHR场景需要，会反过来干扰正常的重定向跳转逻辑

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