Skip to content

CORS (Cross-Origin Resource Sharing)

跨來源資源共用

01你是不是遇到這個 / THE SYMPTOM

我的前端網頁去呼叫 API,瀏覽器 console 跳紅字說被擋住、有個 Access-Control-Allow-Origin 之類的錯誤,但我用 Postman 或 curl 測同一支 API 卻好好的,到底是哪裡卡住

↑ 如果你點頭了,你要的關鍵字就是 CORS (Cross-Origin Resource Sharing)

02這是什麼 / DEFINITION

CORS 是瀏覽器的安全機制:當網頁從 A 網域去呼叫 B 網域的 API,瀏覽器會先確認 B 有沒有用回應標頭(header)明確允許 A,沒允許就擋下來。這是瀏覽器端的規則,不是你的程式碼壞了。

03什麼時候用 / WHEN TO USE

當你的前端和後端不在同一個網域/連接埠(例如前端 localhost:3000 打後端 localhost:8000,或正式站前端與 API 分開部署),就需要在後端設定 CORS 允許清單。

04怎麼跟 AI 說 / HOW TO ASK

直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT:

我的後端 API 被前端呼叫時出現 CORS 錯誤,幫我在後端加上 CORS 設定,允許 https://myapp.com 這個來源,並支援帶 cookie 的請求
05常見坑 / WATCH OUT

CORS 是「後端要設定」、由「瀏覽器來執行」,所以前端怎麼改都沒用、Postman 測不會出錯(因為不是瀏覽器)。常見坑:要帶 cookie/登入憑證時不能用萬用字元 *,必須指定明確網域並開 credentials;還有 preflight(OPTIONS 預檢請求)也要回對標頭。

06相關的詞 / RELATED