Postman调用API正常，JS项目使用fetch请求时出现CORS错误求助

你遇到的情况是Postman调用API返回正常，但前端浏览器触发CORS错误，且无法修改后端配置，以下是几种可行的解决方案：

• 本地开发用反向代理
  这是开发阶段最实用的方案，借助构建工具的代理功能，让本地服务器帮你转发请求，绕过浏览器的CORS限制。
  比如Webpack Dev Server的配置示例：

  module.exports = {
    // 其他Webpack配置项...
    devServer: {
      proxy: {
        '/flight': {
          target: 'https://testapi.exampleflight.com',
          changeOrigin: true, // 必须开启，模拟目标服务器的域名
          secure: false // 如果目标HTTPS证书不合法，可添加此选项
        }
      }
    }
  };
  

  配置完成后，把前端的fetch请求地址改成相对路径：

  fetch("/flight/search/E08558B2263436736D43E67FC85EDD95", requestOptions)
  

• 浏览器插件临时调试
  安装CORS绕过类的浏览器插件（比如Chrome的「Allow CORS: Access-Control-Allow-Origin」），开启后能在开发调试时临时跳过CORS检查。但注意这只适合本地调试，不能用到生产环境，普通用户不会为你的网站特意装这类插件。

• 搭建自己的中转服务器
  写一个简单的后端服务当中转，前端请求这个中转服务器，再由中转服务器去调用目标API（服务器端请求不受浏览器CORS限制）。以下是Node.js + Express的示例代码：

  const express = require('express');
  const fetch = require('node-fetch');
  const app = express();
  const port = 3001;
  
  // 解析JSON格式的请求体
  app.use(express.json());
  
  // 中转航班搜索请求
  app.post('/flight/search/:sessionId', async (req, res) => {
    try {
      const targetUrl = `https://testapi.exampleflight.com/flight/search/${req.params.sessionId}`;
      const response = await fetch(targetUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(req.body)
      });
      const result = await response.text();
      res.send(result);
    } catch (err) {
      res.status(500).send('请求中转失败：' + err.message);
    }
  });
  
  app.listen(port, () => {
    console.log(`中转服务运行在 http://localhost:${port}`);
  });
  

  之后把前端的fetch地址改成中转服务器的地址：

  fetch("http://localhost:3001/flight/search/E08558B2263436736D43E67FC85EDD95", requestOptions)
  

• 关于mode: 'no-cors'的说明
  你代码里注释的mode: 'no-cors'，开启后浏览器会跳过CORS检查，但请求会变成「不透明响应」，无法读取返回的内容（也就是你拿不到result），所以这个方案只适用于不需要处理返回数据的场景，对你当前需求不适用。

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