ExpressJS使用npm cors模块仍触发同源策略跨域拦截如何解决

配置存在的核心问题 #

• 白名单地址末尾多余斜杠：浏览器发送跨域请求时Origin请求头不会携带路径末尾的/，你配置的http://localhost:3002/和实际请求的http://localhost:3002匹配失败，直接触发跨域拦截
• 允许的请求头列表冗余错误：Access-Control-Allow-Origin是服务端返回的响应头，不属于前端发送的请求头，放在allowedHeaders里会导致请求头校验不通过

修复步骤 #

1. 修正白名单配置 #

删除白名单地址末尾的斜杠，修改后如下：

const whitelist = [
  "http://localhost:3002", // 前端当前运行的localhost端口
  "http://localhost:5500", // live server访问地址
];

2. 精简允许的请求头配置 #

删除allowedHeaders里不属于请求头的字段，修改后如下：

allowedHeaders: [
  "Content-Type",
  "Authorization",
  "X-Requested-With",
  "device-remember-token",
  "Origin",
  "Accept",
],

3. 确认中间件加载顺序 #

确保cors中间件的注册在所有路由注册之前，你当前的代码顺序是对的，但后续调整时不能把路由注册放在app.use(cors(corsOptions))之前，否则请求到达路由时还没经过跨域校验，依然会报错。

4. 可选：增加匹配容错逻辑 #

如果需要兼容带斜杠和不带斜杠的场景，可以修改origin匹配逻辑，不用严格相等：

origin: function (origin, callback) {
  // 当origin为undefined时允许访问，该情况代表请求来自同源
  if (!origin) return callback(null, true);
  // 去掉origin末尾的斜杠后再匹配白名单
  const matchOrigin = origin.endsWith('/') ? origin.slice(0, -1) : origin;
  if (whitelist.indexOf(matchOrigin) !== -1) {
    callback(null, true);
  } else {
    callback(new Error("CORS not allowed"));
  }
},

额外注意事项 #

如果前端请求携带了credentials: include配置，需要确保前端请求地址完全匹配白名单，不能用通配符，你当前的配置是符合要求的。

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