无需登录 数据私有 本地保存

CORS 请求构建器 - 自定义跨域请求头测试

11
0
0
0

CORS 请求构建器

构建并发送跨域 HTTP 请求，测试 CORS 配置，分析预检请求与响应头

请求配置
Header 名称 Header 值
简单请求 不会触发预检 (Preflight)
响应结果

配置请求参数后点击发送

响应将在此处展示
— 耗时: —
HeaderValue
—
CORS 常见问题与知识点

CORS（Cross-Origin Resource Sharing，跨域资源共享） 是一种浏览器安全机制，用于控制一个网页能否访问不同源（协议+域名+端口）的资源。由于同源策略的限制，浏览器默认阻止跨域请求。CORS 通过一系列的 HTTP 响应头（如 Access-Control-Allow-Origin）来告知浏览器是否允许跨域访问，从而在保证安全的前提下实现跨域数据交互。

预检请求是浏览器在发送实际跨域请求前，自动发出的一个 OPTIONS 请求，用于检查服务器是否允许该跨域请求。以下情况会触发预检：
  • 使用了 GET、HEAD、POST 之外的方法（如 PUT、DELETE、PATCH）
  • POST 请求的 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain
  • 设置了除安全头之外的自定义请求头（如 Authorization、X-API-Key 等）
预检请求会携带 Access-Control-Request-Method 和 Access-Control-Request-Headers 头，服务器需返回对应的允许头。

简单请求满足所有以下条件：方法为 GET/HEAD/POST；仅使用安全头；POST 的 Content-Type 为三种简单类型之一。简单请求不会触发预检，浏览器直接发送请求并检查响应中的 CORS 头。预检请求则先发送 OPTIONS 请求验证权限，通过后才发送实际请求。理解这一区别对于调试 CORS 问题至关重要。

可以，但有限制。当请求不携带凭证（credentials: omit 或 same-origin 非同源）时，可以设置为 *。如果请求携带了凭证（credentials: include 或 withCredentials=true），则 Access-Control-Allow-Origin 必须指定具体的源（不能是 *），且服务器还需返回 Access-Control-Allow-Credentials: true。

常见错误包括：
  • "No 'Access-Control-Allow-Origin' header" — 服务器未返回正确的 CORS 头，需检查服务端配置
  • "Method not allowed by CORS" — 预检响应中 Access-Control-Allow-Methods 未包含请求方法
  • "Request header field not allowed" — 自定义请求头未被 Access-Control-Allow-Headers 允许
  • "Credentialed request blocked" — 携带凭证时 Access-Control-Allow-Origin 使用了通配符 *
排查时建议使用浏览器开发者工具的 Network 面板查看预检请求和实际请求的详情。

后端需根据需求设置以下响应头：
  • Access-Control-Allow-Origin — 指定允许的源，或动态反射请求的 Origin
  • Access-Control-Allow-Methods — 允许的 HTTP 方法列表
  • Access-Control-Allow-Headers — 允许的请求头列表
  • Access-Control-Allow-Credentials — 是否允许携带凭证（true/false）
  • Access-Control-Max-Age — 预检缓存时间（秒），减少重复预检
大多数框架（Express、Django、Spring 等）都有现成的 CORS 中间件，推荐使用官方方案而非手动设置。
🔧 相关工具