问题：egg.js中如何正确配置CORS解决跨域请求问题？

Question

在使用 Egg.js 开发 Web 应用时，前端访问接口常遇到跨域问题（CORS），导致请求被浏览器拦截。如何在 Egg.js 中正确配置 CORS，以实现安全、灵活的跨域请求支持，是开发者常见的技术难题。该问题通常涉及中间件配置、请求头设置、允许的源与方法定义等关键环节。合理的配置不仅能解决跨域限制，还能提升应用安全性。本文将围绕 Egg.js 中配置 CORS 的常见问题进行深入解析，帮助开发者快速定位并解决问题。

Answer 1

一、Egg.js 中配置 CORS 的背景与基本概念

CORS（Cross-Origin Resource Sharing，跨域资源共享）是浏览器为防止跨域攻击而引入的一种机制。在前后端分离架构中，前端和后端通常部署在不同的域名或端口下，因此容易遇到跨域问题。

Egg.js 是基于 Koa 构建的企业级框架，其内置了 @eggjs/cors 插件用于处理跨域请求。该插件本质上是一个中间件，通过设置响应头来实现对跨域访问的控制。

常见的 CORS 请求拦截原因包括：

• 请求源（Origin）不在允许列表中
• 请求方法（Method）不被允许
• 请求头（Headers）包含非简单字段
• 未正确设置凭证（credentials）相关字段

二、CORS 配置的核心参数解析

在 Egg.js 中，CORS 的核心配置项通常位于 config.default.js 文件中，主要配置如下：

配置项	说明	示例值
origin	允许访问的源，可以是字符串或函数	'http://localhost:3000' 或 (ctx) => ctx.headers.origin
allowMethods	允许的 HTTP 方法	['GET', 'POST', 'PUT', 'DELETE']
allowHeaders	允许的请求头字段	['Content-Type', 'Authorization']
exposeHeaders	允许客户端读取的响应头	['X-Custom-Header']
credentials	是否允许发送 Cookie	true 或 false

三、CORS 配置的典型实践与代码示例

以下是一个典型的 CORS 配置代码片段：

// config/config.default.js
exports.cors = {
  origin: '*',
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
  exposeHeaders: ['X-Powered-By'],
  credentials: true,
};

在某些场景下，可能需要根据上下文动态判断允许的源，例如：

// config/config.default.js
exports.cors = {
  origin: (ctx) => {
    const allowedOrigins = ['http://example.com', 'http://localhost:3000'];
    const requestOrigin = ctx.get('origin');
    return allowedOrigins.includes(requestOrigin) ? requestOrigin : '';
  },
  allowMethods: 'GET,POST',
  credentials: true,
};

四、CORS 常见问题分析流程图

graph TD A[前端请求被浏览器拦截] --> B{是否为跨域请求？} B -- 否 --> C[检查网络状态] B -- 是 --> D[查看响应头是否有 CORS 相关字段] D -- 没有 --> E[确认 Egg.js 是否启用 cors 插件] D -- 有 --> F[检查 origin 是否匹配] F -- 不匹配 --> G[修改 origin 配置] F -- 匹配 --> H[检查 allowMethods / allowHeaders 是否符合要求] H -- 不符合 --> I[调整配置文件中的 allowMethods / allowHeaders] H -- 符合 --> J[排查其他安全限制如 CSRF、Token 等]

五、进阶：CORS 安全性优化策略

虽然设置 origin: "*" 可以快速解决跨域问题，但这会带来潜在的安全风险。建议采取以下策略提升安全性：

1. 严格限定允许的源（origin），避免使用通配符 *
2. 关闭 credentials 功能，除非确实需要跨域携带 Cookie
3. 限制 allowMethods 和 allowHeaders 到最小必要集合
4. 结合 Token 认证机制，增强接口访问控制
5. 利用 Nginx 或 CDN 层面进行 CORS 控制，减轻应用层压力

此外，在生产环境中应定期审计 CORS 配置，并结合日志系统监控异常跨域请求行为。