银星皓月1. 预检请求的本质与产生机制
当浏览器检测到某个跨域请求可能对服务器数据产生副作用时（比如使用PUT/DELETE方法，或者Content-Type不是简单请求允许的三种类型），就会自动发起一个OPTIONS预检请求。这个机制是CORS（跨域资源共享）规范的核心组成部分，本质上是一种安全防护措施。
预检请求的工作流程是这样的：
- 浏览器发现当前请求需要预检
- 先发送OPTIONS请求到目标服务器
- 服务器返回允许的HTTP方法、Header等信息
- 浏览器确认实际请求是否符合服务器规则
- 符合则发送真实请求，否则阻断
关键点：预检请求是浏览器行为，开发者无法通过前端代码控制其触发与否
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 触发预检请求的典型场景
2.1 非简单请求方法
- PUT
- DELETE
- PATCH
- CONNECT
- OPTIONS
- TRACE
2.2 自定义请求头
任何不在以下白名单的Header都会触发预检：
- Accept
- Accept-Language
- Content-Language
- Content-Type（仅限特定值）
2.3 特殊Content-Type
只有当Content-Type是以下三种时才不会触发预检：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
2.4 其他特殊情况
- 请求中带凭据（credentials）
- 使用ReadableStream等特殊对象
3. 预检请求的技术细节解析
3.1 请求头关键字段
预检请求会携带以下特殊Header：
code复制Access-Control-Request-Method: [实际请求方法]
Access-Control-Request-Headers: [自定义头列表]
Origin: [请求来源]
3.2 响应头必备字段
服务器必须正确返回这些Header才能通过预检：
code复制Access-Control-Allow-Origin: [允许的源]
Access-Control-Allow-Methods: [允许的方法]
Access-Control-Allow-Headers: [允许的Header]
Access-Control-Max-Age: [缓存时间]
3.3 缓存机制
通过Access-Control-Max-Age可以设置预检结果缓存时间（单位秒），合理设置这个值能显著提升性能。
4. 移除预检请求的可行方案
4.1 改造为简单请求
- 改用GET/POST/HEAD方法
- 使用标准Header
- 采用简单Content-Type
4.2 服务器端设置
code复制Access-Control-Max-Age: 86400 // 缓存24小时
4.3 反向代理方案
通过Nginx等反向代理将API请求和前端页面部署在同一域名下：
code复制location /api {
proxy_pass http://backend;
proxy_set_header Host $host;
}
4.4 开发环境解决方案
- webpack-dev-server代理
- 浏览器插件临时禁用安全策略（仅限开发）
5. 常见问题与解决方案
5.1 预检请求返回403
检查服务器是否正确处理OPTIONS方法，很多框架需要单独配置。
5.2 预检请求耗时过长
优化方案：
- 减少Access-Control-Allow-Headers范围
- 适当增大Max-Age值
- 合并API接口
5.3 预检请求失败排查步骤
- 检查Network面板确认预检请求是否发出
- 核对请求头Origin字段
- 验证服务器响应头是否完整
- 检查是否有重定向导致Header丢失
6. 性能优化实践
6.1 预检请求合并策略
对于频繁变动的API，可以：
- 设计统一的入口网关
- 实现批处理接口
- 采用WebSocket长连接
6.2 CDN层优化
在CDN边缘节点缓存预检响应：
code复制Cloudflare Workers示例：
addEventListener('fetch', event => {
if (event.request.method === 'OPTIONS') {
event.respondWith(handleOptions(event.request))
}
})
function handleOptions(request) {
return new Response(null, {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,POST,PUT',
'Access-Control-Max-Age': '86400'
}
})
}
6.3 协议升级建议
考虑迁移到HTTP/2或HTTP/3，其多路复用特性可以部分缓解预检请求带来的延迟问题。
7. 特殊场景处理
7.1 文件上传优化
对于文件上传这种必须使用multipart/form-data的场景：
- 单独设计上传域名
- 使用分块上传协议
- 采用签名URL直传方案
7.2 WebSocket连接
WebSocket不受CORS限制，但需要在握手阶段处理Origin验证：
code复制// Node.js示例
const server = require('http').createServer();
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });
wss.on('connection', function connection(ws, request) {
const origin = request.headers.origin;
if (!allowedOrigins.includes(origin)) {
return ws.close();
}
// 处理正常连接
});
8. 安全考量与最佳实践
8.1 白名单配置原则
- 避免使用通配符*
- 动态校验Origin头
- 生产环境禁用Credentials
8.2 日志监控建议
记录所有OPTIONS请求：
code复制// Nginx配置示例
log_format cors '$remote_addr - $http_origin - $request_method - $http_access_control_request_method - $http_access_control_request_headers';
8.3 防御性编程
处理缺失的CORS头：
javascript复制function safeGetHeader(response, header) {
const value = response.headers.get(header);
return value ? value : '';
}
9. 未来演进方向
随着WebTransport等新协议的出现，未来可能会出现绕过CORS限制的替代方案。但目前阶段，理解并合理应用预检请求机制仍是Web开发的必备技能。