localhost:4000 Node服务登录后重定向到localhost:3000出现CORS错误如何解决？

问题原因 #

你当前是通过前端异步请求（XMLHttpRequest/fetch）调用4000端口的登录接口，Passport返回的302重定向会被浏览器自动拦截跟进，对重定向后的3000端口地址发起跨域预检。而3000端口的前端静态服务默认没有配置CORS响应头，就会触发你遇到的报错。
就算你给3000端口配置了CORS，异步请求场景下浏览器也不会自动触发整页跳转，不符合你的业务需求。

最优修复方案（推荐） #

修改服务端登录逻辑，放弃Passport自动重定向配置，改为返回JSON状态由前端主动跳转，完全规避跨域问题：

1. 调整Node端登录处理代码：

const loginHandler = async (req, res,next) => {
  passport.authenticate("local", (err, user, info) => {
    if (err) return next(err);
    // 登录失败
    if (!user) {
      return res.json({
        code: 401,
        redirectUrl: '/login'
      })
    }
    req.logIn(user, err => {
      if (err) return next(err);
      // 登录成功
      return res.json({
        code: 200,
        redirectUrl: '/dashboard'
      })
    })
  })(req,res,next)
};

2. 调整前端登录请求的回调逻辑，拿到响应后主动跳转页面：

// 登录请求回调示例
axios.post('http://localhost:4000/login', loginFormData)
  .then(res => {
    window.location.href = `http://localhost:3000${res.data.redirectUrl}`
  })

其他可选方案 #

如果你不想改现有重定向逻辑，可以把前端异步请求登录的方式，改为原生form表单提交的方式，表单action填写http://localhost:4000/login、method="POST"，整页提交的场景不会触发跨域校验，重定向可以正常生效。

如果你只是开发阶段临时调试，也可以给4000端口的Node服务配置CORS：

1. 安装cors依赖：npm install cors
2. 在Node服务入口文件中添加配置：

const cors = require('cors')
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true // 必须开启，否则Passport无法写入登录态cookie
}))

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