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