使用重定向时出现CORS预检错误的排查求助

问题根源 #

你遇到的核心问题是异步POST请求与服务器端重定向的CORS冲突：

• 如果是普通HTML表单提交（非AJAX/fetch），浏览器会直接处理302重定向，不会触发CORS检查，因为这属于浏览器原生的页面跳转流程。
• 但如果是通过fetch/Axios等异步方式发送POST请求，浏览器会严格遵循CORS规则：当服务器返回302重定向时，浏览器会自动发起GET请求访问重定向地址，若这个地址与API服务器不同源（比如API在localhost:3001，重定向到localhost:3000），就会触发CORS错误。
• GET接口的重定向没问题，大概率是因为GET请求本身是同源的，或者重定向目标与API服务器同源，不需要跨域检查。

解决方案 #

方案1：前端控制页面跳转（推荐） #

放弃服务器端重定向，改为返回成功状态码，由前端处理跳转逻辑，彻底规避CORS问题：

1. 服务器端代码：

await item.save();
// 返回成功响应及跳转地址
res.status(200).json({ success: true, redirectUrl: '/subscribe' });

2. 前端代码（以fetch为例）：

const form = document.querySelector('#your-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  
  try {
    const res = await fetch('/api/create-item', {
      method: 'POST',
      body: formData
    });
    const data = await res.json();
    if (data.success) {
      // 前端控制跳转
      window.location.href = data.redirectUrl;
    }
  } catch (err) {
    console.error('提交失败：', err);
  }
});

方案2：确保完全同源并修正CORS配置（仅适合同源场景） #

如果必须用服务器端重定向，需满足两个条件：

1. API服务器与前端页面完全同源：即协议、域名、端口完全一致（比如都在http://localhost:3000），此时同源策略不限制跳转，不需要CORS中间件也能正常工作。
2. 修正CORS中间件的预检请求处理：如果你的API确实需要处理跨域请求，要确保中间件正确响应OPTIONS预检请求（POST请求可能触发预检）：

// 自定义CORS中间件修正版
function cors(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, PUT, PATCH, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  
  // 直接响应OPTIONS预检请求，无需继续执行后续中间件
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
}

使用官方cors包时，默认会处理预检请求，但如果是同源场景，建议直接移除CORS中间件，避免多余配置干扰。

关键注意点 #

• 永远不要用异步请求去触发服务器端重定向，这种场景下前端跳转是更合理的选择。
• CORS错误只发生在跨域的异步请求中，同源的表单提交或页面跳转不会触发该错误。

内容的提问来源于stack exchange，提问作者Александр Сосо