CORS 跨來源資源共享是什麼？瀏覽器的門禁管制

你的網頁明明寫得好好的，一按下去卻整個卡死，主控台跳出一長串紅字，中間有 CORS 這四個字母。這是所有前後端分家的專案幾乎都會遇到的關卡。

它不是你的程式壞了，是瀏覽器在替使用者把關。搞懂規則，這一關就不會卡住你。

定義

CORS 的全名是 Cross-Origin Resource Sharing，中文叫跨來源資源共享。它是瀏覽器的門禁管制作法，決定一個網頁能不能去存取另一個來源的資源。

現代瀏覽器預設採用同源政策，也就是說，網頁原則上只能存取同一個來源的資源。要跨出去，得由對方伺服器明確點頭。

實際會發生什麼事

當你的網頁前端想去呼叫另一個網址的 API 後端時，如果對方伺服器沒有設定好允許跨網域存取，瀏覽器就會直接報錯，畫面卡死。

症狀很好認：主控台出現 CORS 錯誤訊息，而且請求根本送不出去。你去看後端日誌，通常會發現一行紀錄都沒有。

有設定跟沒設定差在哪

伺服器要回的就是幾個標頭，告訴瀏覽器誰可以來、可以用哪些方法、可以帶哪些標頭。

Access-Control-Allow-Origin: https://a.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

為什麼要有這個規則

• 保護使用者，防止惡意網站偷偷拿你的身分去打別人的 API
• 控制權限，讓服務可以明確指定誰可以來存取
• 現代瀏覽器預設同源政策，跨來源是例外不是常態
• 在安全與開放之間維持平衡

實際用例

前後端分開部署時幾乎一定會遇到。做法上，開發階段可以先寬鬆設定讓自己走得動，上線前務必把允許的來源收緊到指定網域，不要留一個誰都能進的門。

另外記得放行預檢請求。瀏覽器在送出某些請求前，會先發一個詢問用的請求問伺服器能不能來，這一步沒放行，正式請求也走不到。