CORS 请求测试器
从浏览器向任意 API 发送真实的跨域请求,查看 CORS 是否允许。解释何时需要预检,并显示易读的响应头。
什么是 CORS 测试器?
这个 CORS 测试器会从你的浏览器发送真实的跨域请求(使用你选择的方法、Content-Type、自定义请求头和凭据模式),并报告浏览器是否允许 JavaScript 读取响应。发送之前,它会说明该请求是“简单”请求还是需要 OPTIONS 预检,以及原因。
如何使用 CORS 测试器
- 输入要测试的 API URL。
- 选择请求方法、可选的 Content-Type 和可选的自定义请求头,例如
Authorization: Bearer x。 - 如果你的应用使用 credentials: include,请勾选“发送 Cookie / 凭据”。
- 查看预检说明,然后点击“发送测试请求”。
- 如果被允许,查看状态和 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。