已配置CORS仍出现'Access to XMLHttpRequest被CORS策略阻止'错误求助

错误信息：从源'http://localhost:3000'访问'http://localhost:5050/api/posts/'的XMLHttpRequest被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'头。

你的Express API代码：

const express = require('express');
require('dotenv').config();
const { errorHandler } = require('./middleware/errorMiddleware');
require('colors');
const connectDb = require('./config/dbConnect');
const PORT = process.env.PORT || 5050;
const cors = require('cors');

// Connect DB
connectDb();

// Routes
const inviteRoutes = require('./routes/inviteRoutes');
const userRoutes = require('./routes/userRoutes');
const postRoutes = require('./routes/postRoutes');

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

const corsOptions = {
  origin: 'http://localhost:3000',
};
app.use(cors(corsOptions));

app.use('/api/invite', inviteRoutes);
app.use('/api/users', userRoutes);
app.use('/api/posts', postRoutes);

app.use(errorHandler);

app.listen(PORT, () => {
  console.log(`Server started on port: ${PORT}`);
});

排查及解决方案： #

• 验证CORS中间件顺序：确保app.use(cors(corsOptions))在所有路由注册前执行，你的代码顺序没问题，但如果errorHandler提前终止响应，可能会导致CORS头未被设置。
• 检查origin配置准确性：如果前端实际运行地址与http://localhost:3000不一致（比如用127.0.0.1代替localhost、端口不符），会导致origin匹配失败。可临时改为允许所有来源测试：

const corsOptions = {
  origin: '*',
};

测试通过后，建议改用动态验证origin的方式，更安全：

const corsOptions = {
  origin: (origin, callback) => {
    const allowedOrigins = ['http://localhost:3000'];
    if (allowedOrigins.includes(origin) || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
};

• 检查错误处理中间件：若errorHandler未正确传递CORS头，会覆盖之前的设置。在errorHandler中添加响应头：

res.header('Access-Control-Allow-Origin', 'http://localhost:3000');

• 重启服务器：修改代码后必须重启Express服务，确保新配置生效。

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