更换电脑后React通过ngrok调用Express API遇CORS错误（GET/PUT/Delete异常）

• 移除手动设置的响应头代码
  你当前同时使用cors中间件和手动赋值res.headers，这会引发两个关键问题：

  • 浏览器禁止Access-Control-Allow-Origin: *与Access-Control-Allow-Credentials: true同时使用，这会直接触发CORS拦截
  • cors中间件已自动生成规范的CORS响应头，手动赋值会覆盖或破坏中间件的逻辑

  删除这段冲突代码：

  res.headers = {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": true,
      "Access-Control-Allow-Headers":
        "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, access_token",
      "Access-Control-Allow-Methods": "*",
    };
  

• 重新配置cors中间件
  若需要携带凭据（credentials），不能用*作为允许来源，需指定具体的前端域名（包括ngrok临时域名）：

  const cors = require("cors");
  
  const corsOptions = {
    // 动态适配本地开发和ngrok域名
    origin: (origin, callback) => {
      // 添加你的前端本地地址和实际ngrok地址
      const allowedOrigins = ["http://localhost:5173", "https://xxxxxx.ngrok.io"];
      // 允许无origin的请求（如Postman测试）
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error("CORS限制：该来源不被允许"));
      }
    },
    credentials: true,
    allowedHeaders: ["Content-Type", "Authorization", "X-Requested-With", "access_token"],
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
  };
  
  // 确保cors中间件在body-parser等其他中间件之前加载
  app.use(cors(corsOptions));
  

• 处理预检OPTIONS请求
  PUT/DELETE等非简单请求会先发送OPTIONS预检请求，需确保：

  • 不要手动拦截OPTIONS请求，cors中间件会自动处理
  • app.use(cors(corsOptions))必须在app.use(body-parser.json())等中间件之前执行

• 对齐Node和依赖版本
  新电脑的Node版本或cors库版本可能与旧电脑不一致，导致行为差异：

  1. 查看旧电脑的cors版本：npm list cors
  2. 在新电脑的package.json中锁定该版本，例如："cors": "^2.8.5"
  3. 重新安装依赖：npm install

• 检查ngrok配置

  • 确认ngrok转发的端口与API监听的端口一致（如ngrok命令：ngrok http 3000，API需监听3000端口）
  • 前端请求的ngrok域名要与终端显示的完全一致，避免拼写错误

内容的提问来源于stack exchange，提问作者sumanth.js