Node.js Express 框架使用 cors 中间件配置允许特定 Header 怎么实现

文章导读
在 Node.js Express 框架中配置 cors 中间件允许特定 Header,需要在初始化 cors 时传入 allowedHeaders 选项,值为字符串或数组。适用场景是前后端分离架构中自定义请求头验证,风险边界是当 credentials 设为 true 时 origin 不能为通配符 *,且建议明确列出允许的 Header 而非使用 *。
📋 目录
  1. 命令速用版
  2. 为什么会这样
  3. 分步处理
  4. 怎么验证是否生效
  5. 常见坑
  6. 常见问题
  7. 参考来源
A A

在 Node.js Express 框架中配置 cors 中间件允许特定 Header,需要在初始化 cors 时传入 allowedHeaders 选项,值为字符串或数组。适用场景是前后端分离架构中自定义请求头验证,风险边界是当 credentials 设为 true 时 origin 不能为通配符 *,且建议明确列出允许的 Header 而非使用 *。

先说结论:通过 cors 中间件的 allowedHeaders 配置项即可控制服务器响应中 Access-Control-Allow-Headers 的内容。

  • 适合跨域请求携带自定义 Header 的场景
  • 先安装 cors 包并确认 Express 版本兼容性
  • 验收时检查浏览器 Network 面板响应头

命令速用版

若已安装 Express,直接通过 npm 安装 cors 包并在代码中配置 allowedHeaders 数组。

npm install cors

代码配置示例:

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

const corsOptions = {
  origin: 'http://example.com',
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Custom-Header']
};

app.use(cors(corsOptions));

为什么会这样

浏览器发起跨域请求前会发送 OPTIONS 预检请求,服务器需在响应中明确告知允许的 Header。CORS 协议规定,当客户端请求包含非简单请求头(如 Authorization 或自定义字段)时,服务器必须在预检响应中通过 Access-Control-Allow-Headers 显式声明允许这些字段,否则浏览器会拦截请求。

分步处理

第一步安装依赖,在项目根目录执行 npm install cors 命令,确保 package.json 中记录依赖版本。

第二步引入模块,在 Express 入口文件中 require('cors') 获取中间件函数。

Node.js Express 框架使用 cors 中间件配置允许特定 Header 怎么实现

第三步配置选项,创建配置对象,将 allowedHeaders 设置为需要允许的字段名数组,注意字段名大小写敏感。

第四步挂载中间件,使用 app.use(cors(options)) 将配置应用到全局,或针对特定路由单独使用。

第五步处理预检请求,cors 中间件会自动处理 OPTIONS 请求,无需手动编写路由,但需确保中间件顺序在业务路由之前。

怎么验证是否生效

打开浏览器开发者工具 Network 面板,发起跨域请求,查看 OPTIONS 预检请求的响应头。确认响应头中包含 Access-Control-Allow-Headers,且值与你配置的 allowedHeaders 列表一致。若该字段缺失或不匹配,浏览器控制台会报 CORS 策略错误。

常见坑

通配符限制,当 credentials 设置为 true 时,allowedHeaders 在某些浏览器实现中不建议使用 *,应明确列出字段名。

Node.js Express 框架使用 cors 中间件配置允许特定 Header 怎么实现

大小写敏感,HTTP 请求头字段名区分大小写,配置时需与客户端发送的 Header 保持一致,通常建议首字母大写。

预检缓存,浏览器会缓存 OPTIONS 请求结果,修改配置后可能不会立即生效,需清除缓存或调整 maxAge 设置。

常见问题

allowedHeaders 可以设置为星号吗

可以设置为 *,但在涉及凭证(credentials)的场景下建议明确列出字段。公开资料中没有看到可靠的量化数据表明 * 会导致性能问题,但明确列表更安全。

如何允许 Authorization 头

在 allowedHeaders 数组中加入 'Authorization' 字符串即可,注意拼写正确且大小写匹配。

配置后仍然报 CORS 错误怎么办

检查中间件挂载顺序,确保 cors 中间件在 app.use 中位于其他业务路由之前,并确认 origin 配置正确。

参考来源

expressjs/cors GitHub 仓库,页面标题 CORS,URL https://github.com/expressjs/cors