Express返回302重定向至React+Axios时失效，遇CORS拦截问题

这个问题我之前也碰到过，核心原因是Axios会自动跟随302重定向发起跨域请求，但目标域名（Zarinpal）没有配置允许你的前端origin的CORS头，浏览器出于安全策略直接拦截了这个请求。下面给你拆解原因和可行的解决方案：

问题原因拆解 #

当你的Express接口返回302状态码时，Axios会默认自动跟随重定向，向Zarinpal的支付页面URL发起XMLHttpRequest请求。但Zarinpal的服务器并没有返回Access-Control-Allow-Origin这类CORS相关响应头，导致浏览器的预检查（preflight）请求失败，最终抛出你看到的CORS拦截错误。

解决方案：让前端处理跳转（推荐） #

后端不要直接返回302重定向，而是把跳转URL返回给前端，由前端通过页面跳转的方式打开支付页面——这种方式不会触发AJAX的CORS限制，因为是浏览器的页面级跳转，不属于XMLHttpRequest请求范畴。

1. 修改Express后端代码 #

把返回302的逻辑改成返回包含跳转URL的JSON响应：

router.post('/x/handle/accepted', (req, res) => {
  const uuidv4 = require('uuid/v4');
  zarinpalLib.request(req.body.acamount, req.body.acemail, req.body.acphone, req.body.acdescription, uuidv4(), function (data) {
    if (data.status) {
      console.log('here ', data.url)
      // 返回跳转URL给前端，由前端处理跳转
      res.status(200).json({ redirectUrl: data.url });
    } else {
      console.log('here2 ', data.code)
      res.status(500).send(data.code)
    }
  });
});

2. 修改React前端代码 #

收到后端返回的URL后，直接用window.location.href触发页面跳转：

if (inputValue === 'RLS') {
  var data = {
    acfirstname: 'xx',
    aclastname: 'xx',
    acemail: 'xx',
    acphone: phoneNumber,
    acamount: inputAmount,
    acdescription: 'xx'
  };
  try {
    const res = await axios({
      method: 'POST',
      url: `${END_POINT_URL}/api/payment/x/handle/accepted`,
      data
    });
    // 前端触发页面跳转，避开CORS限制
    window.location.href = res.data.redirectUrl;
  } catch (err) {
    console.error('请求支付接口失败:', err);
  }
}

额外优化：替换为官方CORS中间件 #

你自己编写的CORS中间件可能存在细节遗漏（比如没有正确结束OPTIONS预检查请求），建议换成npm官方维护的cors包，配置更稳定可靠：

1. 安装依赖：

npm install cors

2. 在Express中配置使用：

const cors = require('cors');

// 全局挂载CORS中间件（生产环境建议把origin换成你的前端域名，比如'https://your-frontend-domain.com'）
app.use(cors({
  origin: '*',
  credentials: true,
  allowedHeaders: ['Content-Type', 'x-phone-token']
}));

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