无需第三方工具修改响应头解决CORS跨域请求问题

首先纠正你代码里的关键错误：Access-Control-Allow-Origin和Access-Control-Allow-Credentials是服务器返回的响应头，不是前端请求头。你把这两个头写在fetch的headers里完全无效，浏览器会自动忽略它们。

针对你的错误提示（预检请求不允许重定向）和需求，以下是几种无需第三方工具的实现方案：

1. 修改目标站点（siteA）的后端配置（推荐生产环境使用） #

这是最规范、最安全的解决方式：

• 让siteA的服务器在响应中直接返回正确的CORS头：
  • Access-Control-Allow-Origin: siteB（注意不能用*，因为你的请求带credentials: "include"）
  • Access-Control-Allow-Credentials: true
• 解决预检请求重定向问题：
  • 检查siteA的服务器配置，确保OPTIONS请求（浏览器自动发起的预检请求）不会返回重定向状态码（3xx）
  • 如果siteA有全局重定向规则，需要给OPTIONS请求添加例外，让服务器直接返回200状态码并带上上述CORS头
• 额外配置（如果需要）：
  • 若请求用到自定义头或特殊HTTP方法，还需添加Access-Control-Allow-Methods和Access-Control-Allow-Headers头，明确允许的方法和头

2. 自行搭建代理服务器（开发/生产均可使用） #

通过代理服务器转发请求，在代理层添加所需的CORS响应头：
以Node.js + Express为例，快速搭建一个简单代理：

const express = require('express');
const http = require('http');
const app = express();

// 代理路径，前端请求这个地址替代直接请求siteA
app.use('/proxy-siteA', (req, res) => {
  const targetUrl = 'https://siteA-domain.com' + req.url; // 替换为实际siteA地址
  // 发起对siteA的请求
  const proxyReq = http.request(targetUrl, (proxyRes) => {
    // 添加CORS响应头
    res.setHeader('Access-Control-Allow-Origin', 'https://siteB-domain.com'); // 替换为实际siteB地址
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    // 转发siteA的响应状态码、其他头和内容
    res.writeHead(proxyRes.statusCode, proxyRes.headers);
    proxyRes.pipe(res);
  });
  // 转发前端的请求内容到siteA
  req.pipe(proxyReq);
});

// 启动代理服务
app.listen(3000, () => {
  console.log('Proxy server running on http://localhost:3000');
});

然后前端修改fetch请求：

fetch('http://localhost:3000/proxy-siteA', {
  credentials: "include"
})

3. 关闭浏览器CORS检查（仅开发测试用，禁止生产环境使用） #

如果你只是本地开发测试，可以通过启动参数让浏览器跳过CORS校验：

• Windows：在命令提示符中执行

  chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
  

• Mac：在终端执行

  open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/chrome_dev"
  

注意：这种方式会关闭浏览器的跨域安全校验，仅适合本地调试，不要用在日常浏览中。

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