Angular调用Express.js的Google Auth接口出现CORS错误如何解决？

该CORS错误并非来源于你的Express服务，而是来自Google OAuth授权页面。你通过Angular HttpClient发起AJAX请求访问/auth/google接口时，该接口会返回302重定向指向Google的授权域名，浏览器会自动跟进这个重定向请求，但Google的授权服务器不会给http://localhost:4200返回Access-Control-Allow-Origin响应头，因此触发CORS拦截，和你Express端配置的CORS规则无关。

• 方案1：前端不使用AJAX发起请求，直接跳转后端授权地址
  不需要调用HttpClient发GET请求，点击登录按钮时直接用window.location.href跳转至授权地址，浏览器整页跳转不会触发CORS限制。
  Angular端代码示例：

  // 替换原有的addGoogleUser方法，绑定到登录按钮的点击事件
  goGoogleLogin(): void {
    window.location.href = 'http://localhost:5000/auth/google';
  }
  

• 方案2：如需保留SPA无刷新体验，改用弹窗模式实现登录
  点击登录按钮时弹出新窗口加载/auth/google地址，授权完成后弹窗将登录凭证回传给父页面即可，也不会触发CORS限制。

补充注意：授权完成后回调接口返回数据时，不要通过AJAX接收重定向响应，可在回调完成后将token放在query参数中重定向回Angular地址，或存入本地存储后再跳转。

• 手动编写的CORS中间件可以移除，官方cors模块的配置更完善，直接使用app.use(cors())即可，避免自行编写漏配规则。
• Angular端不需要额外设置GET请求的content-type为application/json，GET请求默认不需要该请求头，额外设置反而会触发OPTIONS预检请求增加不必要的开销。

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