CORS 检测仪

下一个

CORS 错误是浏览器控制台里“经典”的那一抹红:当你从其他来源调用 API 时,浏览器会拦截响应。此测试工具会对你粘贴的任意 URL 发送预检 OPTIONS 请求(使用你选择的来源和方法),并解析 Access-Control-* 响应头,让你清楚地看到服务器到底允许什么、阻止什么,以及浏览器为何报错。

如何测试 CORS

  1. 1

    输入目标 URL

    您需要从前端调用的API接口端点,请包含查询字符串和协议信息。

  2. 2

    设置方法和来源

    GET/POST/PUT/DELETE/PATCH。来源可以是你的网站 URL,也可以是你想模拟的任何来源。

  3. 3

    了解预检

    测试工具始终以你选择的来源和方法发送 OPTIONS 请求,并附带 Access-Control-Request-Headers: Content-Type 请求头,与浏览器在发送 JSON 请求前发出的预检完全相同。

  4. 4

    运行测试

    测试工具会发送预检,并报告 HTTP 状态码及 CORS 响应头:Allow-Origin、Allow-Methods、Allow-Headers、Allow-Credentials 和 Max-Age。

  5. 5

    修复配置错误

    该报告会指出存在的缺失或错误:缺少允许来源头、存在禁止使用的头部字段、方法未被允许。

关键的响应头

响应头 作用
Access-Control-Allow-Origin 哪些来源(origin)可以读取响应
Access-Control-Allow-Methods 预检:允许使用哪些方法
Access-Control-Allow-Headers 预检:允许哪些请求头
Access-Control-Allow-Credentials 是否允许携带 Cookie/认证信息
Access-Control-Expose-Headers JS 可以读取哪些响应头
Access-Control-Max-Age 预检结果缓存多长时间

简单请求与预检请求

只有当以下条件全部满足时,请求才算“简单”(无需预检):

  • 方法为 GET、HEAD 或 POST。
  • 请求头仅限于 Accept、Accept-Language、Content-Language、Content-Type(且为特定取值)。
  • Content-Type 如果存在,需为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。

其他任何情况,JSON 请求体、Authorization 头、自定义的 X-Foo 头,或 PUT/DELETE/PATCH,都会触发预检 OPTIONS。服务器必须用正确的 Allow-* 头来响应预检,否则真正的请求永远不会发出。

常见的 CORS 错误

  • “No Access-Control-Allow-Origin header” → 服务器没有设置该响应头。应在服务器端修复,而不是客户端。
  • *“Credentials mode requires Allow-Origin not to be → 如果发送 Cookie,Allow-Origin 必须是具体的来源(或把 Origin 头原样返回)。
  • “Request header X not allowed” → 在预检响应中把 X 加入 Access-Control-Allow-Headers
  • “Method not allowed” → 把该方法加入 Access-Control-Allow-Methods
  • “Redirect not allowed in preflight” → 预检无法跟随重定向。OPTIONS 端点必须直接响应。

Allow-Origin: * 与原样返回 Origin

Access-Control-Allow-Origin: * 很宽松,但不能与凭据一起使用。在生产环境中,请把请求的 Origin 原样返回(在按允许列表校验之后),并在需要 Cookie 时设置 Allow-Credentials: true

用代理作为权宜之计

如果你无法控制服务器,在自己域名下架设一个轻量代理就能彻底绕开 CORS,浏览器会把它视为同源。许多托管平台(Vercel、Netlify、Cloudflare)正是为此提供了重写(rewrite)规则。

常见问题

为防止恶意页面利用浏览器 Cookie 读取其他网站的私有数据。若不启用 CORS,访问 evil.com 就可能让该页面以您的身份请求银行内部 API。CORS 强制要求银行明确允许跨来源的数据读取。

只能在开发环境中禁用。Chromium 提供 --disable-web-security 标志,但该标志会影响所有网站且存在安全隐患。正确的解决方法是使用服务器端头部信息或代理服务器。

Postman并非浏览器,它完全忽略 CORS 。仅当处理JavaScript请求时,浏览器才会强制执行 CORS 规范。在Postman中运行的服务器不会自动符合 CORS 要求。

图像及经典<script>标签可在跨源环境中无 CORS 地加载,但JavaScript无法读取其内容。而<img crossorigin>fetch()则强制要求 CORS 机制生效,因此未启用该机制时,基于Canvas绘制的图像会呈现“污染”状态。

相关工具