React本地应用访问Node服务器遭CORS拦截，预请求校验失败

你的代码里有几个关键问题导致CORS预请求（OPTIONS）失败，逐一修正如下：

1. 中间件顺序完全错误 #

你把app.use("*", ...)的404返回中间件放在了最开头，这会导致所有请求都会先被这个中间件拦截并返回404，后续的CORS配置、路由处理根本不会执行。必须把这个404中间件移到所有路由的最后。

2. 自定义CORS中间件与cors库冲突，且错误提前结束响应 #

你同时用了cors库和自定义的app.all('*')中间件，而且自定义中间件里的res.sendStatus(200);会直接结束响应，导致next()无法触发后续的路由处理，预请求的OPTIONS方法被错误处理。直接移除这个自定义CORS中间件，用cors库即可。

3. 路由路径缺少开头斜杠 #

app.post('api/login', ...)应该改为app.post('/api/login', ...)，否则路径匹配会失败，请求还是会落到404中间件。

4. 缺少JSON请求体解析 #

虽然当前登录接口从header拿token，但添加express.json()中间件是处理JSON请求的标准操作，避免后续接口出现问题。

修改后的完整服务器代码 #

const express = require("express");
const cors = require("cors");
const { Magic } = require('@magic-sdk/admin');
require('dotenv').config();
 
const app = express()
const magic = new Magic(process.env.MAGIC_SECRET_KEY);

// 1. 解析JSON请求体
app.use(express.json());
// 2. 配置CORS，允许客户端来源
app.use(cors({
  origin: process.env.CLIENT_URL,
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'OPTIONS']
}));

// 3. 正确的登录路由（带开头斜杠）
app.post('/api/login', async (req, res) => {
  console.log("login fired")
  try {
    const didToken = req.headers.authorization?.substr(7);
    // 增加token存在性校验，避免报错
    if (!didToken) {
      return res.status(401).json({ error: "Missing authorization token" });
    }
    await magic.token.validate(didToken);
    res.status(200).json({ authenticated: true });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// 4. 404中间件移到最后
app.use("*", (req, res) => res.status(404).json({ error: "not found" }));

module.exports = app

额外检查点 #

• 确认process.env.CLIENT_URL的值是http://localhost:3000，或者直接写死origin: "http://localhost:3000"测试。
• 浏览器的CORS扩展可能和服务器配置冲突，测试时暂时关闭扩展。
• 预请求（OPTIONS）会由cors库自动处理，不需要手动编写响应逻辑。

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