CORS预检请求是浏览器对非简单请求（如PUT、自定义头、application/json）发起前自动发送的OPTIONS请求，用于确认服务器是否允许跨域。满足以下任一条件即触发：请求方法非GET/POST/HEAD、设置自定义头部（如X-Token）、Content-Type为application/xml等非常规类型。浏览器在预检中携带Access-Control-Request-Method、Access-Control-Request-Headers和Origin头，服务器需响应Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers及可选的Access-Control-Max-Age。以Node.js Express为例，可通过拦截OPTIONS请求并设置对应响应头来处理，注意当携带凭证时Access-Control-Allow-Origin不能为*且需配合Access-Control-Allow-Credentials。前端可优化请求方式避免预检，如用POST代替PUT、减少自定义头、使用标准Content-Type，并利用Max-Age缓存预检结果提升性能。理解机制并合理配置即可解决跨域问题。
跨域问题在前端开发中很常见，尤其是前后端分离项目中。当浏览器发起跨域请求时，如果涉及复杂请求，会先发送一个预检请求（Preflight Request），这就是CORS中的OPTIONS请求。理解并正确处理预检请求，是解决跨域问题的关键。
什么是CORS预检请求
当浏览器判断某个请求属于“非简单请求”时，会自动在正式请求之前发送一个OPTIONS请求，询问服务器是否允许该跨域请求，这个请求就是预检请求。
满足以下任一条件的请求会被视为非简单请求：
- 请求方法不是GET、POST或HEAD
- 设置了自定义请求头（如X-Token、Authorization等）
- Content-Type的值为application/json、multipart/form-data以外的类型（如application/xml）
例如，使用fetch发送JSON数据并携带token：
立即学习“Java免费学习笔记（深入）”；
fetch('/api/data', {method: 'PUT',
headers: {
'Content-Type': 'application/json',
'X-Token': 'abc123'
},
body: JSON.stringify({id: 1})
});
这类请求会触发预检流程。
预检请求的交互过程
浏览器发起预检请求时，会带上几个关键头部信息：
- Access-Control-Request-Method：实际请求的方法（如PUT）
- Access-Control-Request-Headers：实际请求中包含的自定义头部（如X-Token）
- Origin：请求来源（协议+域名+端口）
服务器收到OPTIONS请求后，必须正确响应以下头部：
- Access-Control-Allow-Origin：允许的源，不能为*（若携带凭证）
- Access-Control-Allow-Methods：允许的HTTP方法
- Access-Control-Allow-Headers：允许的请求头字段
- Access-Control-Max-Age：预检结果缓存时间（秒）
只有当服务器返回的响应头匹配了预检要求，浏览器才会继续发送真实请求。
后端如何正确处理预检请求
以Node.js + Express为例，可以这样设置中间件：
app.use((req, res, next) => {if (req.method === 'OPTIONS') {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, X-Token, Authorization');
res.sendStatus(200);
} else {
next();
}
});
注意：
- Access-Control-Allow-Origin不能为*，如果前端携带cookie，需明确指定源
- Access-Control-Allow-Credentials设为true时，前端需设置withCredentials = true
- 合理设置Max-Age可减少重复预检，提升性能
前端避免不必要的预检
虽然预检是安全机制，但频繁触发会影响性能。可通过以下方式优化：
- 尽量使用简单请求：用POST代替PUT/PATCH
- 避免自定义头部，必要信息可通过标准头部传递
- Content-Type保持为application/x-www-form-urlencoded或text/plain
- 对高频接口，确保服务器开启预检缓存
比如将PUT改为POST，既能达成目的又避免预检：
fetch('/api/data', {method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'update', id: 1 })
});
基本上就这些。预检请求是浏览器安全策略的一部分，只要前后端配合好，就能顺利通过。关键是理解它的触发条件和通信机制，针对性配置响应头即可。
