Express中router.options内用app.use设置CORS响应头失效问题排查

问题场景 #

尝试为OPTIONS请求添加CORS响应头，第一种写法不生效：

var express = require('express');
const app = express();
var router = express.Router();

router.options('/*', function(req, res, next){
  app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });
  res.sendStatus(200);
  console.log(res.getHeaders());
});

执行后日志显示响应头里没有CORS相关字段：

[Object: null prototype] {
  'x-powered-by': 'Express',
  'content-type': 'text/plain; charset=utf-8',
  'content-length': '2',
  etag: 'W/"2-nOO9QiTIwXgNtWtBJezz8kv3SLc"'
}

改用第二种写法后生效：

router.options('/*', function(req, res, next){
  const respond = async function() {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  }
  respond()
  res.sendStatus(200);
  console.log(res.getHeaders());
});

日志显示CORS头已成功添加：

[Object: null prototype] {
  'x-powered-by': 'Express',
  'access-control-allow-origin': '*',
  'access-control-allow-headers': 'Origin, X-Requested-With, Content-Type, Accept',
  'content-type': 'text/plain; charset=utf-8',
  'content-length': '2',
  etag: 'W/"2-nOO9QiTIwXgNtWtBJezz8kv3SLc"'
}
OPTIONS /email 200 4.345 ms - 2

错误原因分析 #

第一种写法的核心问题在于错误地在请求处理回调内使用app.use()注册中间件：

• app.use()的作用是向Express的中间件栈添加新的中间件，这个中间件只会对后续到来的请求生效，当前正在处理的OPTIONS请求不会触发这个刚注册的中间件。
• 你在注册完中间件后立刻调用了res.sendStatus(200)，此时响应已经被发送，后续即使中间件能执行也无法修改响应头了。

第二种写法之所以生效，是因为你直接在当前请求的回调函数里调用了设置响应头的逻辑（套的async函数是多余的，这里没有异步操作，函数会立即执行），在res.sendStatus()之前完成了响应头的设置，所以头能被正确添加到响应里。

正确写法与排查方向 #

正确写法示例 #

1. 直接在OPTIONS路由回调中设置响应头

这是最直接的方式，不需要额外中间件：

router.options('/*', function(req, res){
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.sendStatus(200);
});

2. 提前注册全局CORS中间件

如果需要所有路由都支持CORS，建议在路由注册前全局添加中间件：

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

// 全局CORS中间件
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  // 处理OPTIONS请求直接返回
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

var router = express.Router();
// 注册你的路由...
app.use(router);

3. 使用官方推荐的cors包

更稳定的方式是使用npm包cors，它已经处理了所有CORS场景的细节：

npm install cors

var express = require('express');
const cors = require('cors');
const app = express();
var router = express.Router();

// 全局启用CORS
app.use(cors());

// 或者仅在特定路由启用
router.options('/*', cors());

排查错误的核心方向 #

• 中间件注册时机：app.use()必须在请求到达前完成注册，不能在单个请求的回调内动态添加，否则当前请求无法触发该中间件。
• 响应发送顺序：设置响应头的代码必须在res.send()/res.sendStatus()/res.end()之前执行，一旦响应被发送，响应头就无法修改。
• 中间件执行顺序：确保CORS相关中间件在其他路由处理中间件之前执行，避免后续中间件覆盖或提前发送响应。
• 检查响应头覆盖：确认没有其他中间件（比如安全中间件）修改或移除了你设置的CORS响应头。

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