前端向后端发起HTTP POST请求时的CORS预检请求问题求助

我来帮你排查这个CORS预检请求的问题，从你提供的代码来看，有几个细节可能导致了这个问题，咱们一步步来梳理：

1. 未定义的白名单（whitelist） #

你的cors配置里用到了whitelist变量，但代码里没看到它的定义。如果这个数组是空的或者没包含你的前端地址http://localhost:3000，那么origin校验会失败，直接返回CORS错误。

你需要先明确定义白名单：

// 定义允许访问的前端域名
const whitelist = ['http://localhost:3000'];

2. allowedHeaders里的冗余配置 #

你在allowedHeaders里添加了Access-Control-Allow-Origin、Access-Control-Allow-Methods这些字段，但这些是后端返回给前端的响应头，不是前端请求时需要被允许的请求头。把这些冗余的字段删掉，只保留前端实际会发送的请求头即可：

allowedHeaders: ['Content-Type', 'Authorization'], // 只保留你实际需要的请求头

3. 确保CORS中间件的加载顺序 #

CORS中间件需要放在所有路由和其他业务中间件（比如express.json()、路由挂载）之前，这样它才能优先处理OPTIONS预检请求，避免其他中间件拦截了预检请求导致错误。

修改后的完整后端配置示例：

const express = require('express');
const cors = require('cors');
const app = express();

// 定义允许的前端域名白名单
const whitelist = ['http://localhost:3000'];

const corsOptions = {
  origin: function (origin, callback) {
    // 允许不带origin的请求（比如Postman测试场景）
    if (whitelist.indexOf(origin) !== -1 || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  optionsSuccessStatus: 200 // 兼容旧浏览器
};

// 先加载CORS中间件
app.use(cors(corsOptions));

// 再加载其他中间件和路由
app.use(express.json());
app.use('/api', require('./routes/yourRoute')); // 替换成你的路由文件

app.listen(4000, () => {
  console.log('Server running on port 4000');
});

4. 简化配置测试（可选） #

如果还是有问题，你可以先把CORS配置简化，直接指定origin为前端地址，排除白名单函数的影响：

const corsOptions = {
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  optionsSuccessStatus: 200
};

如果这样能正常工作，再逐步换回带白名单函数的配置，排查是否是函数逻辑的问题。

另外，你的前端fetch请求代码看起来是没问题的，确保data对象的结构正确，JSON.stringify能正常序列化即可。

备注：内容来源于stack exchange，提问作者Harsh Sharma