CORS 请求测试器

从浏览器向任意 API 发送真实的跨域请求,查看 CORS 是否允许。解释何时需要预检,并显示易读的响应头。

这是一个“简单请求”:不需要预检,但只有当响应带有与本站匹配的 Access-Control-Allow-Origin 头时才能读取响应。
请求直接从您的浏览器发出,来源为本页面(https://algokit.dev),与网站上的脚本完全相同。只有 CORS 安全列表中的响应头以及 Access-Control-Expose-Headers 中列出的响应头可见。

什么是 CORS 测试器?

这个 CORS 测试器会从你的浏览器发送真实的跨域请求(使用你选择的方法、Content-Type、自定义请求头和凭据模式),并报告浏览器是否允许 JavaScript 读取响应。发送之前,它会说明该请求是“简单”请求还是需要 OPTIONS 预检,以及原因。

如何使用 CORS 测试器

  1. 输入要测试的 API URL。
  2. 选择请求方法、可选的 Content-Type 和可选的自定义请求头,例如 Authorization: Bearer x。
  3. 如果你的应用使用 credentials: include,请勾选“发送 Cookie / 凭据”。
  4. 查看预检说明,然后点击“发送测试请求”。
  5. 如果被允许,查看状态和 JavaScript 能看到的响应头;如果被阻止,请在浏览器控制台中查看具体的 CORS 错误。

何时使用 CORS 测试器

适合检查公开 API 能否被浏览器应用调用,或用特定请求头复现 CORS 错误。源始终是 https://algokit.dev,所以只允许你自己域名的服务器会正确地显示为被阻止;要得到精确的匹配,请从你自己的站点测试。它无法区分 CORS 失败与网络或 TLS 错误,浏览器不会透露这一点。

CORS 测试器 的工作原理

工具从页面的源(https://algokit.dev)调用带有 mode: "cors" 的 fetch(),与你自己的前端代码完全一样。预检说明遵循 Fetch 标准:GET/HEAD/POST 之外的方法、Content-Type 不是 form-urlencoded、multipart/form-data 或 text/plain,或任何自定义请求头,都会触发 OPTIONS 预检。当浏览器阻止响应时,它会抛出一个通用的 TypeError 并有意隐藏原因,所以工具会提示你去查看控制台。

常见用例

  • 在单页应用中集成第三方 API 之前,检查它是否发送 Access-Control-Allow-Origin。
  • 找出请求中的哪个请求头触发了预检。
  • 验证 credentials: include 能否工作(需要具体的源,而不是 *)。
  • 查看哪些响应头通过 Access-Control-Expose-Headers 暴露给了 JavaScript。

安全提示

请求会直接从你的浏览器发往你输入的 URL;启用凭据时,你在该站点的 Cookie 也会被一并发送。

常见问题

为什么 curl 可以,而浏览器失败?

CORS 只由浏览器强制执行。curl 和服务器会忽略它,所以 API 可能在 curl 中正常,但网页仍然无法读取。

什么会触发预检?

GET、HEAD 或 POST 之外的方法、application/json 这类非简单的 Content-Type,或 Authorization 这类自定义请求头。

Access-Control-Allow-Origin: * 可以与 Cookie 一起使用吗?

不可以。使用凭据时,服务器必须回显确切的源,并发送 Access-Control-Allow-Credentials: true。

探索更多分类