浏览器自动发送options预检请求以确认跨域权限，前端无法干预；后端必须返回200/204状态码并设置access-control-allow-*等响应头，且不执行业务逻辑。
浏览器在发起某些跨域请求（如带自定义 Header、使用 PUT/DELETE 方法、或 Content-Type 非 application/x-www-form-urlencoded、multipart/form-data、text/plain）时，会先自动发送一个 OPTIONS 预检请求，以确认服务器是否允许后续的实际请求。JavaScript 本身不直接“处理” OPTIONS 请求——它由浏览器自动发出，开发者无法用 fetch 或 XMLHttpRequest 主动触发或拦截这个预检过程。真正需要处理的是后端服务如何响应这个 OPTIONS 请求，否则预检失败，实际请求被浏览器阻止。
后端必须正确响应 OPTIONS 请求
浏览器只关心服务器对 OPTIONS 请求的响应是否符合 CORS 规范。关键点包括：
- 返回 200 或 204 状态码（不能是 4xx/5xx）
-
设置必要响应头：
-
Access-Control-Allow-Origin：指定允许的源（如https://example.com或*；若需携带凭证则不能为*） -
Access-Control-Allow-Methods：列出允许的 HTTP 方法（如GET, POST, PUT, DELETE） -
Access-Control-Allow-Headers：列出允许的请求头（如Content-Type, Authorization, X-Requested-With） -
Access-Control-Allow-Credentials：若前端设置了credentials: 'include'，此项必须为true，且Access-Control-Allow-Origin不能为* -
Access-Control-Max-Age（可选）：缓存预检结果的时间（秒），避免重复 OPTIONS 请求
-
- 不执行业务逻辑：OPTIONS 请求应快速返回，不查数据库、不改状态、不触发副作用
常见后端框架配置示例
以 Node.js（Express）、Python（Flask）、Nginx 为例：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
-
Express：可用
cors中间件，或手动处理
（手动）
app.options('/api/data', (req, res) => {
res.header('Access-Control-Allow-Origin', 'https://your-frontend.com');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Allow-Credentials', 'true');
res.sendStatus(204);
});
flask-cors，或手动添加响应头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, Authorization';
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Max-Age 86400;
add_header Access-Control-Allow-Credentials 'true';
return 204;
}
前端能做的配合优化
虽然前端不处理 OPTIONS，但可通过调整请求方式减少预检：
- 避免不必要的自定义 Header（如临时去掉
Authorization测试是否仍触发预检） - 使用标准
Content-Type：优先用application/json时，确保后端明确允许该类型（Access-Control-Allow-Headers: Content-Type） - 简化请求方法：GET/POST 且无特殊 Header 时通常不触发预检
- 检查凭证设置：若不需要 cookies/token，前端可省略
credentials: 'include'，便于使用Access-Control-Allow-Origin: *
调试技巧
遇到跨域失败，按顺序排查：
- 打开浏览器 DevTools → Network → 找到
OPTIONS请求 → 查看其响应状态码和响应头 - 确认响应中是否包含必需的 CORS 头，且值合法（例如
Allow-Origin和前端 origin 完全匹配） - 检查控制台报错信息（如 “Response to preflight request doesn’t pass access control check”），它通常指出缺失哪个头
- 用 curl 模拟 OPTIONS 请求验证后端行为：
curl -X OPTIONS -H "Origin: https://example.com" -I https://api.example.com/endpoint
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
