logo
GeekFormat

CORS 回應標頭產生器

CORS 標頭建構器

為常見的跨來源場景生成 Access-Control-Allow-* 標頭。早期檢測萬用字元和不允許憑證衝突。

生成的結果

CORS 檢查清單

1. 如果使用 cookie 或授權憑證,瀏覽器不接受 * 作為 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 一次配齊
  • 適合直接落設定:Nginx、閘道器、後端服務都能少寫錯一層
  • 預檢場景友善:適合處理 OPTIONS 請求、API 串接和瀏覽器跨域報錯排查
  • 產生即複製:輸出結果清晰規範,可直接用於閘道器、代理和後端服務設定

使用方法

  1. 填寫允許的來源(Origin)、請求方法、請求標頭、揭露標頭和是否攜帶憑證
  2. 工具自動產生標準 CORS 回應標頭設定區塊並顯示衝突警告
  3. 查看 CORS 檢查清單確認設定是否合理
  4. 複製產生的回應標頭區塊用於伺服器設定或 API 除錯

常見問題

如何快速產生正確的 CORS 回應標頭?

先填允許來源、方法、請求標頭和是否帶憑證,再產生對應回應標頭;這樣比手寫更穩,也更容易避免萬用字元與憑證衝突。

為什麼 Access-Control-Allow-Origin 不能和 Credentials 一起用星號?

當允許攜帶憑證時,瀏覽器不接受萬用字元來源。這個工具會幫助您提前識別此類高頻衝突,減少串接時的跨域報錯。

適合處理預檢請求 OPTIONS 設定嗎?

適合。它可以同時幫助產生 Methods、Headers、Max-Age 等常見預檢相關欄位,適用於前後端跨域串接和閘道器設定。

可以直接複製到伺服器設定裡使用嗎?

可以。產生結果適合複製到 Nginx、Express、Spring Boot、閘道器規則或其他伺服器設定中,省去手寫回應標頭的時間。