React使用axios请求Express接口出现CORS跨域错误无法解决

AI 小北

2026-9-26

修复方案

1. 调整后端CORS中间件的注册顺序

Express中间件按代码书写顺序从上到下执行，你当前将app.use(cors())放在了所有API路由的后面，请求命中/api/products路由时没有经过CORS中间件处理，响应头缺少跨域相关字段，是本次报错的根本原因。
请将CORS中间件移到所有路由注册之前，修正后的后端代码如下：

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const userRoute = require("./routes/user");
const authRoute = require("./routes/auth");
const productRoute = require("./routes/product");
const cartRoute = require("./routes/cart");
const orderRoute = require("./routes/order");
const cors = require("cors");

dotenv.config();

mongoose
  .connect(process.env.MONGO_URL)
  .then(() => console.log("DB connection successful"))
  .catch((error) => {
    console.log(error);
  });

// 中间件注册顺序：CORS要放在所有路由前面
app.use(express.json());
app.use(cors()); // 移到这里

app.use("/api/auth", authRoute);
app.use("/api/users", userRoute);
app.use("/api/products", productRoute);
app.use("/api/carts", cartRoute);
app.use("/api/orders", orderRoute);

app.listen(process.env.PORT || 5000, () => {
  console.log("Backend server is running");
});

2. 修正前端axios请求的异步写法

你当前的异步函数中调用axios.get没有加await，无法拿到正确的响应结果，属于附带问题，修正后的代码片段如下：

useEffect(() => {
  const getProducts = async () => {
    try {
      const res = await axios.get("http://localhost:5000/api/products"); // 加await
      console.log(res.data);
      setProducts(res.data);
    } catch (err) {
      console.log(err)
    }
  };
  getProducts();
}, [cat]);