MERN项目中CORS中间件拦截Axios POST请求问题求助

问题根源 #

你的CORS中间件加载顺序错误。Express的中间件是按注册顺序执行的，你先挂载了/receipts路由，之后才启用CORS，导致路由处理请求时，CORS中间件还没生效，响应头里自然没有Access-Control-Allow-Origin，浏览器就会拦截请求。

修复步骤 #

1. 调整中间件顺序 #

把app.use(cors());移到路由挂载之前，确保所有请求先经过CORS处理：

修改后的server.js：

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const dotenv = require("dotenv");
const receiptRoutes = require("./routes/receiptRoutes");

dotenv.config();
const app = express();

// 先启用CORS中间件，明确指定前端origin
app.use(cors({
  origin: "http://127.0.0.1:5173",
  credentials: true // 需携带Cookie或认证信息时开启
}));
app.use(express.json({ extended: true }));
// 再挂载路由
app.use("/receipts", receiptRoutes);

const PORT = process.env.PORT;
const CONNECTION_URL = process.env.CONNECTION_URL;

const connect = async () => {
  try {
    await mongoose.connect(CONNECTION_URL); // 加await确保数据库连接成功
    console.log("Established connection to DB");
  } catch (error) {
    console.error(error);
  }
};

app.listen(PORT, () => {
  connect();
  console.log(`Server running on ${PORT}`);
});

2. 额外检查点 #

• 确认前端请求地址http://localhost:8000/receipts和后端服务地址完全匹配，避免域名/端口不一致
• 若路由中使用Multer处理文件上传，确保Multer配置正确（如存储路径、文件大小限制），能正常解析multipart/form-data类型请求
• 修改代码后重启后端服务，确保配置生效

为什么之前配置origin没用？ #

因为路由先于CORS中间件执行，CORS的配置根本没机会作用到/receipts的请求上，调整顺序后，CORS规则才会被应用到所有请求（包括/receipts）。

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