frontend Troubleshooting
CORS 预检 OPTIONS 请求失败排查
浏览器请求被 CORS 拦截、OPTIONS 预检返回 404/405 或缺少 Access-Control-Allow-Origin 头时，用 curl -X OPTIONS 复现预检，核对服务端允许的 Origin、Method、Headers 与 credentials 组合，注意带 Cookie 时不能用 * 通配。
CORS 是浏览器策略。先用浏览器控制台确认失败的预检请求，再看 OPTIONS 响应是否包含正确的 Access-Control-Allow-* 头。
Scenario
这篇文章解决什么问题
适用于“CORS 预检 OPTIONS 请求失败排查”对应的线上或本地排障场景。不要只根据最终报错下结论，应先把问题拆成入口、链路、目标服务和资源限制几层，再用命令逐层证实。CORS 是浏览器策略。先用浏览器控制台确认失败的预检请求，再看 OPTIONS 响应是否包含正确的 Access-Control-Allow-* 头。
Symptoms
典型现象
- 浏览器请求被 CORS 拦截、OPTIONS 预检返回 404/405 或缺少 Access-Control-Allow-Origin 头时，用 curl -X OPTIONS 复现预检，核对服务端允许的 Origin、Method、Headers 与 credentials 组合，注意带 Cookie 时不能用 * 通配。
- 相关日志、命令或页面中反复出现 cors、options、browser 等关键词。
- 同一服务在不同机器、不同入口或不同时间段表现不一致，需要通过证据链缩小范围。
Before Debugging
排查前先确认
- 先区分浏览器运行时、构建期、SSR/水合、依赖安装和网络 API 问题。
- 保留浏览器控制台、Network 失败请求、构建日志和 lockfile 状态。
- 确认本地、CI、预览环境和生产环境的 Node 版本与环境变量是否一致。
Root Causes
常见根因分层
运行环境差异
Node 版本、包管理器、lockfile、CI 内存、浏览器 API 与 SSR 环境差异都会导致“本地好、线上坏”。
- 固定 Node/pnpm 版本
- CI 使用 frozen lockfile
- 构建后 preview 复现
客户端和服务端首屏不一致
时间、随机数、localStorage、window、viewport 条件渲染会引发 hydration mismatch 或闪烁。
- SSR 阶段输出确定内容
- 浏览器专属逻辑放 mounted/ClientOnly
- 避免首屏按 viewport 分支
浏览器安全策略和跨域
CORS、Cookie SameSite、HTTPS、混合内容和缓存策略会让接口在 Postman 可用但浏览器失败。
- 看预检 OPTIONS
- 确认凭证模式与 Allow-Origin
- 从 Network 读取真实响应
Diagnosis Path
分步诊断流程
1. 固定现场，避免追着变化状态跑
先记录故障时间、影响入口、完整错误和最近一次变更。CORS 预检 OPTIONS 请求失败排查 这类问题经常在重启、重试或缓存刷新后短暂消失，没有现场信息会很难复盘。
- 截图或保存完整错误文本
- 记录请求域名/IP/端口/namespace/服务名
- 标出最近发布、配置、证书、镜像或依赖变更
curl -i -X OPTIONS https://api.example.com/path -H "Origin: https://app.example.com" -H "Access-Control-Request-Method: POST"
curl -i https://api.example.com/path -H "Origin: https://app.example.com"2. 在故障发生的同一位置复现
很多误判来自测试位置不同：本机通不代表服务器通，容器内通不代表宿主机通，集群外通也不代表 Pod 内通。复现命令要尽量贴近真实流量路径。
- 从报错服务所在机器执行测试
- 必要时加 Host、SNI、namespace 或代理参数
- 把成功路径和失败路径的输出并排比较
curl -i https://api.example.com/path -H "Origin: https://app.example.com"
grep -R "Access-Control-Allow" nginx.conf app/3. 读取服务端证据，而不是只看客户端提示
客户端报错通常是结果摘要。真正能区分根因的是服务端日志、内核日志、事件、进程状态或数据库状态。
- 在浏览器 Network 中找到失败的 OPTIONS 或实际请求。
- 确认服务端允许 Origin、Method 和请求头，尤其是 Authorization/Content-Type。
- 带 Cookie 或 Authorization 时不能使用 Access-Control-Allow-Origin: *。
grep -R "Access-Control-Allow" nginx.conf app/4. 做最小修复并立即回归验证
每次只改一个变量，修复后用同一条复现命令回测，并观察日志是否停止增长。这样可以避免多个临时改动互相掩盖。
- 带 Cookie 或 Authorization 时不能使用 Access-Control-Allow-Origin: *。
- 确保 OPTIONS 路由不会被鉴权中间件直接拒绝。
- 区分 CORS 错误和接口真实 401/403/500，浏览器提示可能会掩盖真实响应。
curl -i https://api.example.com/path -H "Origin: https://app.example.com"
grep -R "Access-Control-Allow" nginx.conf app/Commands
排查命令与使用意图
命令 1
用于从指定位置模拟真实请求。加 -v 可以看到 DNS、TCP、TLS、HTTP 头和代理连接过程，是定位链路阶段的关键证据。
curl -i -X OPTIONS https://api.example.com/path -H "Origin: https://app.example.com" -H "Access-Control-Request-Method: POST"命令 2
用于从指定位置模拟真实请求。加 -v 可以看到 DNS、TCP、TLS、HTTP 头和代理连接过程，是定位链路阶段的关键证据。
curl -i https://api.example.com/path -H "Origin: https://app.example.com"命令 3
用于补充“CORS 预检 OPTIONS 请求失败排查”的排查证据链。grep 的输出需要结合上下文其他命令交叉验证，不要单独依赖某一条结果下结论。
grep -R "Access-Control-Allow" nginx.conf app/Risk Notes
容易踩坑的地方
- 不要为了修 CORS 把所有来源、所有 Header 和 Credential 同时放开，这将产生严重的安全漏洞。
- 不要随手删除 lockfile 解决 install 问题，这会导致依赖版本不可控。
- 不要在未确认浏览器兼容性的情况下使用最新的 JavaScript API 或 CSS 特性。
Verification
修复后怎么确认
- 原始故障现象已经消失，且使用同一入口重新测试 CORS 预检 OPTIONS 请求失败 能稳定成功。
- 服务端日志不再出现同类错误，监控中的错误率、重启次数、连接数或延迟回到正常区间。
- 如果做过临时绕过，已经记录恢复计划，例如还原宽松策略、补监控、补限制或提交正式配置。
Prevention
后续预防
- 把 Node/pnpm 版本、registry 和 CI 内存配置写入项目文档，确保环境一致。
- 新增 SSR 页面时检查 hydration warning，避免水合不匹配导致页面闪烁或交互异常。
- 接口跨域策略按域名白名单维护，不使用长期通配，降低安全风险。
- 在 CI 中使用 frozen lockfile 确保依赖版本可复现，避免本地和 CI 依赖不一致。
常见问题
Postman 能调通，浏览器不行说明什么？
Postman 不受浏览器 CORS 策略限制。浏览器失败仍然需要服务端正确返回 CORS 头。
为什么简单 GET 不预检，POST 会预检？
自定义 Header、非简单 Content-Type、PUT/DELETE 等会触发预检 OPTIONS。
Long-tail SEO
你可能正在搜索这些报错
下面这些错误原文、场景词和中英文搜索词，都是排查同类问题时常见的入口。
- CORS preflight OPTIONS failed
- Access-Control-Allow-Origin missing
- No Access-Control-Allow-Origin header
- OPTIONS 404 405 CORS
- CORS credentials true wildcard
- 跨域预检失败 nginx
- Access-Control-Allow-Headers
- CORS blocked by browser
Need More Help
这个问题还没完全解决？
把你的报错、环境和已经尝试过的步骤发给我，后续会优先补充到排障手册。