React/Node.js应用CORS策略拦截请求错误修复求助

问题场景 #

开发React（前端端口5173）+ Node.js/Express（后端端口3000）Web应用时，Postman调用API完全正常，但前端用fetch请求时触发CORS错误：

Access to fetch at 'XXXURL' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

已尝试但无效的操作 #

• 设置fetch的mode: 'no-cors'：错误消失，但请求实际未成功（返回不透明响应，无法获取数据）
• 添加自定义CORS中间件：手动设置Access-Control-Allow-Origin等响应头，错误依旧
• 使用cors包：配置多个origin（含localhost:5173、127.0.0.1:5173、*），仍报相同错误

问题根源与修复方案 #

1. 重复配置CORS导致冲突 #

你的app.js中同时使用了cors包和自定义CORS中间件，两者都会设置响应头，可能导致头信息混乱或覆盖，浏览器无法识别有效CORS配置。

修复：保留cors包，删除自定义CORS中间件
Express的cors包已完整封装CORS处理逻辑，无需重复手动设置响应头。

2. Origin配置中的多余斜杠 #

你配置的origin数组里包含"http://localhost:5173/"和"http://127.0.0.1:5173/"，末尾的斜杠会导致origin匹配失败——浏览器发送的origin是http://localhost:5173（无斜杠），和配置的带斜杠URL不匹配，因此CORS验证不通过。

修复：去掉origin末尾的斜杠
修改cors配置为：

app.use(
  cors({
    origin: ["http://localhost:5173", "http://127.0.0.1:5173"],
    credentials: true // 若需携带cookie则保留，无需可删除
  })
);

测试阶段可直接用origin: "*"允许所有origin，但生产环境不建议。

3. 确保CORS中间件在路由之前加载 #

cors中间件必须放在所有路由注册之前，否则路由请求不会经过CORS处理。你的app.js中已正确将cors放在路由注册前，这部分无需改动，但要确保无其他中间件拦截请求。

4. 优化fetch请求（可选） #

GET请求无需设置Content-Type: application/json（GET无请求体，该头多余），可简化请求配置：

async function getFighterStats() {
  dispatch({ type: "getFighters/start" });
  try {
    const res = await fetch(`http://127.0.0.1:3000/app/v1/fighters/`, {
      method: "GET",
      headers: {
        Accept: "application/json"
      }
    });
    const data = await res.json();
    dispatch({ type: "getFighters/finish", payload: data });
  } catch {
    dispatch({
      type: "rejected",
      payload: "There was an error calling API..."
    });
  }
}

最终修正后的app.js示例 #

import express from "express";
import fighterRouter from "./routes/fighterRoutes.js";
import predictionRouter from "./routes/predictionRoutes.js";
import cors from "cors";

const app = express();

// 先加载JSON解析中间件
app.use(express.json());
// 加载cors中间件，需在路由前注册
app.use(
  cors({
    origin: ["http://localhost:5173", "http://127.0.0.1:5173"],
    credentials: true
  })
);

// 注册业务路由
app.use("/app/v1/fighters", fighterRouter);
app.use("/app/v1/prediction", predictionRouter);

export default app;

内容的提问来源于stack exchange，提问作者Tyson O'Gilvie