Node.js Koa框架CORS配置失效问题及Koa+React服务端代码指南

我来帮你定位并解决koa2-cors不生效的问题，结合你的代码场景，常见的问题点和修复方案如下：

1. 务必检查中间件加载顺序 #

Koa的中间件是按洋葱模型执行的，cors中间件必须放在所有路由、静态资源中间件的最前面，才能确保所有请求都经过CORS规则处理。看你的代码片段，目前app.use(cors())放在了router初始化之后，但要确认后续加载路由、静态资源的代码是否在它之后：

// 正确顺序：先加载cors，再加载其他中间件
app.use(cors());
// 之后再加载router、static等
app.use(router.routes());
app.use(static(path.resolve(__dirname, 'public')));

如果router.routes()或static中间件放在了cors()之前，那对应请求会跳过CORS处理，这是最常见的踩坑点。

2. 显式配置CORS参数（避免默认配置不足） #

默认的cors()配置可能无法覆盖你的业务场景，比如前端需要携带Cookie、发送自定义请求头、指定特定跨域域名等。建议显式配置参数：

app.use(cors({
  // 允许指定域名跨域，若需支持多域名可做判断逻辑
  origin: ctx => ctx.request.header.origin, 
  credentials: true, // 允许前端携带Cookie（需配合前端withCredentials=true）
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 允许的请求方法
  allowHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'] // 允许的自定义请求头
}));

注意：如果开启了credentials: true，origin不能设为*，必须指定具体域名或动态返回请求头里的Origin。

3. 确认OPTIONS预检请求被正确处理 #

浏览器发送复杂跨域请求（比如POST JSON、带自定义头）时，会先发送OPTIONS预检请求。koa2-cors默认会自动处理OPTIONS，但如果你的路由或其他中间件提前拦截了OPTIONS请求（比如直接返回了响应），就会导致CORS失败。

可以临时添加一个全局OPTIONS路由兜底：

router.options('*', async ctx => {
  ctx.status = 204;
});

4. 排查是否有其他中间件覆盖响应头 #

某些自定义中间件、错误处理中间件可能会修改或覆盖CORS相关的响应头（比如Access-Control-Allow-Origin）。可以添加一个调试中间件，在响应发送前打印头信息：

app.use(async (ctx, next) => {
  await next();
  // 查看响应头是否包含CORS字段
  console.log('CORS相关响应头:', {
    'Access-Control-Allow-Origin': ctx.response.headers['access-control-allow-origin'],
    'Access-Control-Allow-Credentials': ctx.response.headers['access-control-allow-credentials']
  });
});

把这个调试中间件放在cors()之后，确认CORS字段是否正常存在。

5. 清除浏览器缓存再测试 #

浏览器可能会缓存之前的跨域响应结果，导致新配置不生效。可以：

• 打开浏览器开发者工具（F12），在Network面板勾选「Disable cache」
• 手动清除浏览器缓存后重新发起请求

先从中间件顺序和显式配置参数入手调整，大部分CORS不生效的问题都能解决。

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