如何测试跨域请求的预检（CORS Preflight）是否生效？

Question

如何通过浏览器开发者工具和后端日志验证跨域预检（CORS Preflight）请求是否生效？常见问题包括：OPTIONS 请求未正确返回 Access-Control-Allow-Origin 等头部，导致浏览器拦截后续请求。需确认预检请求中 Access-Control-Request-Method 和 Access-Control-Request-Headers 是否被正确响应，且服务器未因路由或中间件配置错误而拒绝 OPTIONS 请求。

Answer 1

如何通过浏览器开发者工具和后端日志验证跨域预检（CORS Preflight）请求是否生效

1. CORS 预检机制的基本原理

CORS（跨源资源共享）是浏览器实现的一种安全策略，用于控制前端应用能否从不同源（协议、域名、端口）的服务器请求资源。当请求满足以下任一条件时，浏览器会自动发起一个 OPTIONS 方法的预检请求：

• 使用了除 GET、POST、HEAD 外的 HTTP 方法（如 PUT、DELETE）
• 设置了自定义请求头（如 X-Auth-Token）
• Content-Type 为 application/json 以外的类型（如 application/xml）

预检请求中包含两个关键头部：

请求头	说明
Access-Control-Request-Method	实际请求将使用的 HTTP 方法
Access-Control-Request-Headers	实际请求中将携带的自定义头部

服务器必须在响应中正确返回 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers，否则浏览器将拦截后续的实际请求。

2. 使用浏览器开发者工具验证预检流程

打开 Chrome 浏览器的开发者工具（F12），切换到 Network 面板，执行可能触发预检的请求（如带自定义头的 POST 请求）。

1. 观察是否有 OPTIONS 请求出现在请求列表中
2. 点击该 OPTIONS 请求，查看 Request Headers 中是否包含：
   • Access-Control-Request-Method: PUT
   • Access-Control-Request-Headers: x-auth-token
3. 检查 Response Headers 是否包含：
   • Access-Control-Allow-Origin: https://your-frontend.com
   • Access-Control-Allow-Methods: PUT, POST, DELETE
   • Access-Control-Allow-Headers: x-auth-token
4. 若缺少上述任一头部，或状态码非 200/204，则预检失败

注意：某些框架默认未处理 OPTIONS 请求，需显式配置中间件支持。

3. 后端日志分析与常见问题排查

在服务端启用详细日志记录，确保能捕获所有进入的请求，包括 OPTIONS 类型。

2024-04-05T10:23:10Z INFO Incoming request: OPTIONS /api/data
Headers: {
  "origin": "https://frontend.com",
  "access-control-request-method": "PUT",
  "access-control-request-headers": "x-auth-token"
}

常见问题包括：

• 路由未匹配 OPTIONS 请求（如 Express 中未定义 app.options()）
• CORS 中间件未启用或配置错误（如 allowMethods 缺少 PUT）
• 反向代理（Nginx）未转发 OPTIONS 请求至后端
• 防火墙或 WAF 拦截了非标准方法请求

可通过日志确认请求是否到达服务器，以及中间件是否正常响应。

4. 解决方案与最佳实践

以下是 Node.js + Express 的正确配置示例：

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'X-Auth-Token']
}));
// 显式处理 OPTIONS 请求（可选）
app.options('*', cors());

Nginx 配置片段：

location /api/ {
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' 'https://your-frontend.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, X-Auth-Token';
        return 204;
    }
}

确保所有中间件链允许 OPTIONS 请求通过，避免被身份认证中间件提前拒绝。

5. 自动化检测流程图

graph TD A[发起跨域请求] --> B{是否满足预检条件?} B -- 是 --> C[浏览器发送 OPTIONS 预检] C --> D[服务器接收 OPTIONS 请求] D --> E{响应包含正确CORS头?} E -- 否 --> F[浏览器阻止实际请求] E -- 是 --> G[发送实际请求] G --> H[完成数据交互] B -- 否 --> I[直接发送实际请求]

该流程清晰展示了预检机制的关键决策点，有助于定位问题发生在哪一阶段。