Node.js 跨域（CORS）配置指南

---

一、CORS 核心概念与背景

跨域资源共享（CORS）是浏览器安全策略的一部分，用于限制非同源请求。Node.js 作为后端服务，需通过配置 HTTP 响应头或中间件来解除这一限制。CORS 的核心响应头包括：

• Access-Control-Allow-Origin：允许的请求源（如 https://example.com 或通配符 *）
• Access-Control-Allow-Methods：允许的 HTTP 方法（如 GET, POST）
• Access-Control-Allow-Headers：允许的自定义请求头（如 Authorization, Content-Type）
• Access-Control-Allow-Credentials：是否允许携带 Cookie 或认证信息。

---

二、Node.js 实现 CORS 的两种方式

1. 手动配置响应头（原生 HTTP/Express）

适用于简单场景或自定义需求，但需处理预检请求（OPTIONS）逻辑：

// Express 示例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有源
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  if (req.method === 'OPTIONS') { // 处理预检请求
    res.sendStatus(204);
  } else {
    next();
  }
});

注意：通配符 * 与 credentials: true 不可同时使用。

---

2. 使用 cors 中间件（推荐）

通过第三方库简化配置，支持动态策略和预检请求自动化处理。

步骤指南：

1. 安装依赖

   npm install cors
   

2. 基础配置

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   // 全局启用 CORS（允许所有源）
   app.use(cors());
   

3. 精细化控制

   const corsOptions = {
     origin: ['https://example.com', 'https://dev.example.com'], // 白名单
     methods: 'GET,POST,PUT,DELETE',
     allowedHeaders: ['Content-Type', 'Authorization'],
     credentials: true, // 允许携带 Cookie
     maxAge: 86400,     // 预检请求缓存时间（秒）
   };
   app.use(cors(corsOptions));
   

4. 动态源验证

   const whitelist = ['https://trusted-domain.com'];
   app.use(cors({
     origin: (origin, callback) => {
       if (whitelist.includes(origin)) {
         callback(null, true);
       } else {
         callback(new Error('Blocked by CORS policy'));
       }
     }
   }));
   

---

三、高级场景与常见问题

1. 预检请求（Preflight Request）

• 触发条件：非简单请求（如 PUT、自定义请求头、application/json 数据格式）。
• 自动处理：cors 中间件默认支持，手动配置需显式响应 OPTIONS 方法。

2. 携带凭证（Cookies/HTTP Auth）

• 配置要求：

  app.use(cors({ 
    origin: 'https://example.com', // 必须指定具体域名，不可用通配符
    credentials: true 
  }));
  

• 客户端设置：fetch 需添加 credentials: 'include' 选项。

3. 安全性最佳实践

• 避免滥用通配符：生产环境应明确允许的域名。
• 限制 HTTP 方法：仅开放必要方法（如禁用 DELETE 对公开 API）。
• 日志与监控：记录异常 CORS 请求，防范恶意探测。

---

四、调试与错误排查

1. 浏览器开发者工具

   • 检查 Network 标签中的 OPTIONS 请求响应头。
   • 验证 Access-Control-Allow-* 头部是否匹配请求。

2. 常见错误

   • CORS header missing：未正确配置响应头。
   • Credentials not allowed with wildcard origin：通配符与 credentials: true 冲突。

---

五、总结

通过 cors 中间件可快速实现安全、灵活的跨域配置，而手动设置适用于定制化需求。核心原则包括：

• 最小权限原则：仅开放必要资源与方法。
• 动态策略：根据业务需求动态验证请求源。
• 兼容性：注意旧版浏览器（如 IE10+）对 CORS 的支持限制。

---