配置Access-Control-Allow-Origin后，303重定向仍遇CORS问题

你遇到的CORS错误，核心原因是带凭证（credentials）的跨域请求触发重定向时，浏览器会自动向重定向目标地址发起新请求，且这个新请求同样会携带凭证。如果你的CORS配置只允许http://localhost:4000，但重定向的目标地址不在这个范围内（比如后端自己的http://localhost:3090下的路径），就会触发CORS拦截。

另外，服务器直接返回303重定向本身就不符合SPA的设计逻辑——SPA要的是无刷新交互，服务器强制重定向会打断前端的控制流程。

这种方式既解决CORS问题，又保留SPA特性，是最合理的做法：

1. 后端Express修改 #

把原来返回303重定向的代码，换成返回包含跳转地址的JSON响应：

// 替换掉res.redirect(303, '/target-path');这类代码
res.status(200).json({ redirectTo: '/target-path' });

2. 前端Axios修改 #

在表单提交的请求回调里，拿到后端返回的跳转地址，用前端路由或直接跳转：

axios.post('/api/submit-form', yourFormData, { withCredentials: true })
  .then(res => {
    // 如果用React Router v6+
    // navigate(res.data.redirectTo);
    // 普通跳转（适合非路由页面）
    window.location.href = res.data.redirectTo;
  })
  .catch(err => {
    // 处理表单提交失败逻辑
    console.error('提交失败:', err);
  });

如果暂时不想改后端逻辑，只能调整CORS配置，允许重定向目标的来源。比如重定向目标是后端自己的地址，就把后端地址加入允许列表：

app.use(cors({
  origin: (origin, cb) => {
    // 允许前端和后端自身的地址
    const allowed = ['http://localhost:4000', 'http://localhost:3090'];
    if (!origin || allowed.includes(origin)) {
      cb(null, true);
    } else {
      cb(new Error('CORS不允许该来源'));
    }
  },
  credentials: true
}));

但这种方式会让浏览器自动发起重定向请求，还是会打断SPA的无刷新体验，只适合临时调试用。

生产环境前后端同域，重定向目标也是同域地址，浏览器不会触发跨域校验，所以不会出现CORS错误。但开发环境跨域，就把这个不符合SPA逻辑的问题暴露出来了。

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