已设置Access-Control-Allow-Origin为*仍出现CORS错误？

可能的原因及解决方案 #

1. CORS中间件加载顺序错误

你的CORS配置代码必须放在所有路由定义之前。如果先定义了/feed/post这类路由，再加载CORS中间件，请求到达路由时还没经过CORS头设置，自然会触发错误。

修正后的代码顺序：

// 先加载CORS中间件
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader(
    'Access-Control-Allow-Methods',
    'OPTIONS, GET, POST, PUT, PATCH, DELETE'
  );
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

// 再加载你的路由
app.use('/feed', require('./routes/feed')); // 示例路由加载

2. 未正确处理OPTIONS预检请求

浏览器发送POST请求前会先发送OPTIONS预检请求，若后端未正确响应，会触发CORS错误。在CORS中间件中手动处理OPTIONS请求：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader(
    'Access-Control-Allow-Methods',
    'OPTIONS, GET, POST, PUT, PATCH, DELETE'
  );
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  // 直接响应OPTIONS请求，无需继续处理后续逻辑
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

3. 使用成熟的cors包替代手动配置

手动配置容易遗漏边缘情况，推荐使用官方维护的cors包简化处理：

1. 安装依赖：

npm install cors

2. 替换手动配置：

const cors = require('cors');

// 快速启用全量CORS支持
app.use(cors());

// 或者匹配你之前的自定义配置
app.use(cors({
  origin: '*',
  methods: ['OPTIONS', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

4. 排查其他中间件或错误处理逻辑

检查是否有其他中间件（如错误处理中间件）覆盖了响应头，确保CORS中间件是第一个被加载的中间件（日志类中间件除外，但需放在CORS之后）。

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