Express注册验证后重定向到login页面报CORS跨域错误该如何解决？

• 你当前的请求模式是前端通过AJAX（如axios/fetch）调用后端5000端口的signup接口，后端返回301重定向后，浏览器会自动跟随重定向请求3000端口的/login地址。你配置的CORS头只在5000端口的后端服务生效，3000端口的前端静态服务没有返回对应的CORS头，所以预检请求被CORS策略拦截，才会报出当前错误。
• 额外说明：前后端分离架构下，不要用后端重定向响应AJAX请求，这是不符合常规开发规范的写法，也会引入额外的跨域问题。你之前写的<Redirect to="/login" />不生效，是因为该组件是React Router的声明式跳转组件，只能在组件渲染逻辑中使用，无法在AJAX异步回调中直接生效。

把重定向逻辑交给前端处理，修改两端代码即可：

1. 修改后端signup接口逻辑，注册成功后不要返回重定向，改为返回成功状态码和提示：

exports.signup = (req, res) => {
  bcrypt.hash(req.body.password, 10).then((hash) => {
    const user = {
      lastName: req.body.lastName,
      firstName: req.body.firstName,
      email: req.body.email,
      password: hash,
    };
    User.create(user)
      .then(() => {
        // 替换重定向逻辑，返回成功响应
        res.status(200).json({ code: 0, message: "注册成功" });
      })
      .catch((error) => res.status(500).json({ message: "Impossible de créer l'utilisateur. " + error }));
  });
};

2. 修改前端请求逻辑，拿到注册成功的响应后，用编程式导航跳转：

• React Router v6 示例：

import { useNavigate } from 'react-router-dom'
// 组件内声明导航方法
const navigate = useNavigate()
// 注册请求的成功回调内执行跳转
axios.post('/users/signup', formData).then(res => {
  if(res.data.code === 0) {
    navigate('/login')
  }
})

• Vue Router 示例：

// 注册请求的成功回调内执行跳转
this.$router.push('/login')

• 原生JS项目示例：

window.location.href = '/login'

如果你坚持要用后端重定向，需要给3000端口的前端静态服务配置CORS规则，添加Access-Control-Allow-Origin: *响应头，同时处理OPTIONS请求。但这种方案会引入额外的配置成本，不建议使用。

注意：你当前使用的301是永久重定向，会被浏览器长期缓存，测试前记得清空浏览器缓存，避免修改代码后依然走旧的重定向逻辑。

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