CORS预检请求是浏览器在发送非简单跨域请求前自动发起的OPTIONS请求，用于确认服务器是否允许实际请求。当请求方法为PUT、DELETE等或包含自定义头（如X-Token）或Content-Type为application/json时触发。该请求携带Access-Control-Request-Method和Access-Control-Request-Headers头，服务端需响应Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等头信息。若服务端未正确处理OPTIONS请求，浏览器将阻止后续请求。Node.js可通过中间件设置响应头并放行OPTIONS请求；Nginx可通过反向代理将跨域转为同源，避免CORS检查；前端可尽量使用GET/POST、避免自定义头以减少预检。核心是前后端协同配置，确保预检通过。
当使用JavaScript进行跨域请求时，浏览器出于安全考虑会实施同源策略限制。CORS（跨-Origin Resource Sharing）是一种W3C标准，允许服务端声明哪些外域可以访问资源。对于某些请求，浏览器会先发送一个“预检请求”（Preflight Request），以确认服务器是否允许实际的请求。
什么是CORS预检请求？
预检请求是浏览器在发送某些跨域请求前，自动发起的一个OPTIONS请求。它发生在以下情况：
- 请求方法不是GET、POST或HEAD
- 设置了自定义请求头（如X-Token）
- Content-Type为application/json等非简单类型
这个OPTIONS请求会携带Access-Control-Request-Method和Access-Control-Request-Headers头，询问服务器是否允许该操作。
服务端如何处理预检请求？
服务端必须正确响应OPTIONS请求，否则浏览器将阻止后续的实际请求。关键响应头包括：
立即学习“Java免费学习笔记（深入）”；
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- Access-Control-Allow-Origin：指定允许访问的源，如*或https://example.com
- Access-Control-Allow-Methods：列出允许的HTTP方法，如GET, POST, PUT, DELETE, OPTIONS
- Access-Control-Allow-Headers：声明允许的请求头，如Content-Type, X-Token, Authorization
- Access-Control-Max-Age：设置预检结果缓存时间（单位秒），减少重复请求
例如Node.js + Express中的处理方式：
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'https://example.com');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Token');
if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
前端避免触发预检的建议
虽然预检是安全机制，但可能影响性能。可通过以下方式减少预检：
- 尽量使用GET或POST请求
- 避免添加自定义请求头
- 发送JSON数据时确保Content-Type: application/x-www-form-urlencoded或text/plain（但通常不现实）
- 若必须用application/json，需服务端配合支持预检
Nginx反向代理绕过CORS
开发环境中，也可通过Nginx代理避免跨域问题：
location /api/ {
proxy_pass http://backend-server/;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";
}
这样所有请求都走同源代理，浏览器不会触发CORS检查。
基本上就这些。只要理解预检机制，并在服务端正确返回响应头，就能顺利处理复杂跨域请求。关键是前后端协同配置，别让OPTIONS请求被忽略或拒绝。
