NodeJS+Vue项目CORS跨域问题求助：预请求未通过校验

问题描述 #

遇到的CORS错误提示：

Access to XMLHttpRequest at 'http://localhost:3007/auth/login' 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.

已尝试配置cors中间件（指定origin为http://localhost:5173，也试过直接app.use(cors())），但问题未解决，后端代码如下：

import express from "express";
import mongoose from "mongoose";
import { config } from "dotenv";
import { router as loginRoute } from "./routes/login.js";
import cors from "cors";
import "dotenv/config.js";

const app = express();
app.use(express.json());

// Server connect
app.listen(3007, () => {
    console.log(`I m listening on 3007`);
});

// route
app.use("/auth", loginRoute);

// CORS Cross Orgin Resource Sharing

app.use(
 cors({
     origin: "http://localhost:5173",
     optionsSuccessStatus: 200,
     methods: ["GET", "POST", "DELETE", "UPDATE", "PUT", "PATCH"],
     preflightContinue:false
 })
);

解决方案 #

问题核心是CORS中间件的注册顺序错误——你把路由注册放在了CORS中间件前面，导致请求先进入路由处理，根本没经过CORS中间件的处理，自然不会带上Access-Control-Allow-Origin等必要响应头。

只需要把CORS中间件移到路由注册之前即可，修改后的代码：

import express from "express";
import mongoose from "mongoose";
import { config } from "dotenv";
import { router as loginRoute } from "./routes/login.js";
import cors from "cors";
import "dotenv/config.js";

const app = express();
app.use(express.json());

// 先注册CORS中间件，确保所有请求都经过它处理
app.use(
 cors({
     origin: "http://localhost:5173",
     optionsSuccessStatus: 200,
     methods: ["GET", "POST", "DELETE", "UPDATE", "PUT", "PATCH"],
     preflightContinue:false
 })
);

// Server connect
app.listen(3007, () => {
    console.log(`I m listening on 3007`);
});

// 再注册路由
app.use("/auth", loginRoute);

补充说明 #

Express的中间件是按注册顺序依次执行的，只有前面的中间件处理完成（调用next()），请求才会传到后面的中间件或路由。把CORS放在解析JSON的中间件之后、路由之前，能确保所有请求（包括OPTIONS预请求）都先经过CORS处理，带上所需的响应头，彻底解决跨域问题。

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