Node.js Express已配置CORS响应头仍报错：缺失Access-Control-Allow-Origin头

我之前也踩过一模一样的坑！明明写了CORS响应头的中间件，却还是收到No 'Access-Control-Allow-Origin' header is present on the requested resource的错误，大概率是这几个原因导致的：

1. 中间件顺序放错了 #

Express的中间件是按注册顺序执行的，如果你的CORS中间件放在路由、静态文件服务（比如app.use(express.static('public'))）或者其他会提前发送响应的中间件后面，那它根本没机会给响应加上CORS头！

解决办法：把这段CORS中间件代码移到最顶部，确保它是第一个被注册的中间件，在所有路由和其他中间件之前。

2. 没正确处理OPTIONS预检请求 #

浏览器发送复杂请求（比如带自定义头、非GET/POST的请求）时，会先发送一个OPTIONS预检请求。如果你的中间件只是调用next()，而后续路由没有处理OPTIONS请求，就会导致响应没有带上CORS头。

修改你的中间件，加上OPTIONS请求的处理：

app.use((req, res, next) => { 
  res.header('Access-Control-Allow-Origin', '*') 
  res.header('Access-Control-Allow-Headers', [ 'Accept', 'Authorization', 'Content-Type', 'Origin', 'X-Requested-With' ].join(', ')) 
  res.header('Access-Control-Allow-Methods', [ 'DELETE', 'GET', 'HEAD', 'OPTIONS', 'PATCH', 'POST', 'PUT' ].join(', ')) 
  
  // 直接处理OPTIONS预检请求，返回204状态码结束响应
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  
  next() 
})

3. 后续代码覆盖了响应头 #

检查你的路由或者其他后续中间件里，有没有修改Access-Control-Allow-Origin这个头，比如不小心用res.set('Access-Control-Allow-Origin', null)或者其他值覆盖了你原本设置的*。

更稳妥的替代方案：使用官方cors包 #

自己写CORS中间件很容易漏掉边缘情况，不如直接用Express官方推荐的cors包，它已经处理了所有CORS相关的细节：

1. 安装包：

npm install cors

2. 配置使用：

const cors = require('cors');

app.use(cors({
  origin: '*',
  allowedHeaders: ['Accept', 'Authorization', 'Content-Type', 'Origin', 'X-Requested-With'],
  methods: ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'PATCH', 'POST', 'PUT']
}));

这样基本不会再出现CORS头缺失的问题啦！

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