JavaScript 中 CORS 预检请求 OPTIONS 失败怎么排查解决-js教程-PHP中文网

cors预检options失败本质是服务器未正确响应浏览器的预检询问：必须返回含access-control-allow-origin、methods、headers的合规响应头，且headers须精确覆盖前端所有自定义头，否则浏览器直接拦截后续请求。

javascript 中 cors 预检请求 options 失败怎么排查解决

JavaScript 中 CORS 预检请求 OPTIONS 失败，本质是浏览器在发正式请求前“问了一次”，而服务器没答对或没答上。问题不在前端代码写错，而在服务端响应不符合规范——只要 OPTIONS 请求返回的响应头缺失、错误或不匹配，浏览器就会直接拦截后续请求，控制台报错如 No 'Access-Control-Allow-Origin' header 或 header field xxx is not allowed。

看 Network 面板确认是否真触发了 OPTIONS

打开浏览器开发者工具 → Network 标签页 → 发起一次出问题的请求（比如带 Authorization 头的 PUT）→ 找到第一个 method 为 OPTIONS 的请求项：

如果没看到 OPTIONS 请求，说明该请求属于“简单请求”（GET/POST + 简单头 + 简单 Content-Type），问题不在预检，而是主响应头缺失 Access-Control-Allow-Origin
如果看到 OPTIONS 请求但状态码不是 200 或 204，说明服务器未正确处理该方法（如返回 404、405 或 500）
点击它，查看 Response Headers：必须包含 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 三个关键头

检查 Access-Control-Allow-Headers 是否覆盖所有自定义头

这是最常被忽略的一环。只要前端请求带了非简单头（如 Authorization、X-Request-ID、X-Token），OPTIONS 响应里的 Access-Control-Allow-Headers 就必须显式列出它们，不能只写 Content-Type。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

例如前端发了：headers: { Authorization: 'Bearer abc', X-Trace-ID: '123' }
后端 OPTIONS 响应必须包含：Access-Control-Allow-Headers: Authorization, X-Trace-ID
注意大小写不敏感，但拼写必须完全一致；多个头用英文逗号+空格分隔
若使用通配符 *，仅在不携带凭据（credentials: false）时有效，且部分浏览器（如 Safari）仍可能拒绝

验证 Access-Control-Allow-Methods 和 Origin 匹配

OPTIONS 响应中的两个头必须与实际请求严格对应：

Access-Control-Allow-Methods 必须包含你真正要用的 HTTP 方法，比如 DELETE 请求，就一定要有 DELETE；若同时支持 POST 和 PUT，就得写成 POST, PUT, OPTIONS
Access-Control-Allow-Origin 不能是 * 当请求携带凭据（如 credentials: true 或自动发送 Cookie）；此时必须精确匹配前端 origin，如 https://your-app.com，且不能带尾部斜杠
开发时常用 http://localhost:3000，后端配置需明确允许该地址，不能只写 localhost 或漏掉协议

排查中间层是否吞掉或覆盖了响应头

即使应用代码写了 CORS 头，也可能被反向代理、WAF、CDN 或负载均衡器拦截或重写：

Nginx 默认不转发 OPTIONS 请求给后端，需显式配置：if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin '*'; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; add_header Access-Control-Max-Age 1728000; add_header Content-Type 'text/plain; charset=utf-8'; add_header Content-Length 0; return 204; }
Kubernetes Ingress、Cloudflare、阿里云 WAF 等常默认屏蔽 OPTIONS 或清除自定义响应头，需进控制台检查 CORS 相关开关
用 curl 模拟预检请求绕过浏览器，直连服务端验证原始响应：curl -I -X OPTIONS -H "Origin: https://example.com" -H "Access-Control-Request-Method: PUT" -H "Access-Control-Request-Headers: Authorization" http://your-api.com/path

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南