开发实战指南
cURL 成功、浏览器失败:CORS 排查步骤
区分网络错误与浏览器 CORS 策略,检查 OPTIONS 预检、允许来源和凭据设置,理解浏览器 HTTP 工具的限制。
先区分失败层次
cURL 不受浏览器同源策略约束。cURL 能收到响应,只说明该端点可以响应,不代表网页有权读取它。
在浏览器 Network 中区分 DNS、TLS 和连接失败、HTTP 错误响应,以及 CORS 阻止读取的响应。单独一个 fetch 失败信息无法确定原因。
检查 OPTIONS 预检
跨域请求带 Authorization 或 application/json 等非简单请求条件时,通常先触发 OPTIONS 预检。服务器需要允许请求来源、方法和请求头。
同时检查预检响应和实际响应。下面是服务端响应配置示例,不是让客户端把这些头发出去;只允许服务实际需要支持的来源。
Access-Control-Allow-Origin: https://tools.nav.city
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Vary: Origin单独检查凭据
浏览器的凭据请求必须使用明确允许的来源,Access-Control-Allow-Origin: * 不能用于公开凭据响应。服务端还需要 Access-Control-Allow-Credentials: true,Cookie 策略仍然生效。
协议需要时才携带凭据。不能不经允许列表校验就原样回显任意 Origin;跨站 Cookie、混合内容和认证失败也需要分别检查。
选择能回答当前问题的工具
本站 HTTP 客户端在点击运行后直接向 HTTPS 目标发送请求,不通过代理绕过 CORS。可以先用 URL 解析检查地址,再用 cURL 转换准备代码示例。
自己控制的端点应修复服务端策略,并从实际来源测试。无法修改的第三方端点,可按需要使用经过授权的后端集成;设置 no-cors 得到的不是可读取的响应。