logo
GeekFormat

CORS Header Builder

CORS 响应头生成

为常见跨域接口生成 Access-Control-Allow-* 头,提前识别通配符和 credentials 的冲突。

生成结果

CORS 检查清单

1. 如果使用 Cookie 或 Authorization 凭据,浏览器不接受 * 作为 Allow-Origin。

2. 预检请求通常还需要服务端正确响应 OPTIONS。

3. 前端只能看到被 Access-Control-Expose-Headers 暴露出来的非简单响应头。

JSON 预览

{
  "headers": [
    {
      "name": "Access-Control-Allow-Origin",
      "value": "https://app.geekformat.com"
    },
    {
      "name": "Access-Control-Allow-Methods",
      "value": "GET, POST, PATCH, DELETE, OPTIONS"
    },
    {
      "name": "Access-Control-Allow-Headers",
      "value": "Content-Type, Authorization, X-Request-Id"
    },
    {
      "name": "Access-Control-Expose-Headers",
      "value": "ETag, X-Trace-Id"
    },
    {
      "name": "Access-Control-Allow-Credentials",
      "value": "true"
    },
    {
      "name": "Access-Control-Max-Age",
      "value": "600"
    }
  ],
  "warnings": []
}

在线配 CORS 响应头,少踩跨域细节坑。

相关推荐

适用场景

  • 前后端联调时先生成一版标准 CORS 头,快速验证是不是配置问题
  • 排查浏览器跨域报错时通过警告提示定位 Allow-Origin 与 Credentials 冲突
  • 为 Nginx、网关或后端服务生成可直接复制的跨域配置块
  • 处理 OPTIONS 预检请求配置时确认 Methods、Headers 和 Max-Age 是否正确

功能特点

  • 跨域字段直接生成:Origin、Methods、Headers、Credentials、Max-Age 一次配齐
  • 内置冲突检测:通配符与 Credentials 不兼容等高频错误即时提示
  • 适合直接落配置:Nginx、网关、后端服务都能少写错一层
  • 生成即复制:输出结果清晰规范,可直接用于网关、代理和后端服务配置

使用方法

  1. 填写允许的来源(Origin)、请求方法、请求头、暴露头和是否携带凭证
  2. 工具自动生成标准 CORS 响应头配置块并显示冲突警告
  3. 查看 CORS 检查清单确认配置是否合理
  4. 复制生成的响应头块用于服务端配置或接口调试

常见问题

如何快速生成正确的 CORS 响应头?

先填允许来源、方法、请求头和是否带凭证,再生成对应响应头;这样比手写更稳,也更容易避免通配符与凭证冲突。

为什么 Access-Control-Allow-Origin 不能和 Credentials 一起用星号?

当允许携带凭证时,浏览器不接受通配符来源。这个工具会帮助您提前识别此类高频冲突,减少联调时的跨域报错。

适合处理预检请求 OPTIONS 配置吗?

适合。它可以同时帮助生成 Methods、Headers、Max-Age 等常见预检相关字段,适用于前后端跨域联调和网关配置。

可以直接复制到服务器配置里使用吗?

可以。生成结果适合复制到 Nginx、Express、Spring Boot、网关规则或其他服务端配置中,省去手写响应头的时间。