CORS(跨來源資源共享)
又稱:跨來源 · 跨域 · CORS 錯誤 · Access-Control-Allow-Origin · 瀏覽器攔擋
瀏覽器的一道安全關卡:網頁腳本要向「不同來源」的伺服器要資料時,得對方明確允許,否則瀏覽器直接擋下。
你會在什麼時候遇到它
這是「為什麼我的腳本能跑、放進網頁就失敗」的經典原因。同一段呼叫 API 的程式碼,用 curl 或 Python 跑沒事,搬到瀏覽器前端就被 CORS 擋。不懂它,你會一直以為是自己程式碼寫錯。
打個比方
像一棟大樓的門禁:不是伺服器不肯給你資料,而是瀏覽器這個警衛規定「A 網頁不能隨便向 B 網站要東西」,除非 B 事先登記「我允許 A」。警衛是瀏覽器,不是伺服器。
最小範例
瀏覽器 console 跳出:
Access to fetch at 'https://api.model.com/v1/chat' from origin
'https://myapp.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present ...
注意:這行錯誤是「瀏覽器」印的,不是伺服器拒絕你。
伺服器其實有回資料,只是瀏覽器認為未獲授權,把回應扣下來、不交給你的腳本。兩個重點。第一,CORS 只發生在瀏覽器:curl、Python、後端伺服器之間的呼叫都沒有這道限制,因為它們不是瀏覽器。第二,正確的修法是讓「伺服器」回一個 Access-Control-Allow-Origin 標頭;但模型 API 的伺服器你改不了,所以真正的解法是把呼叫搬到自己的後端,由後端去問 API、再把結果交給前端 —— 不是在前端加個什麼標頭就能繞過。
最常搞錯的地方
- 想在前端「加個標頭」把 CORS 關掉。CORS 是瀏覽器強制執行的安全機制,前端改不動;能不能跨來源由伺服器的回應標頭決定,不是你這邊說了算。
- 以為「後端能跑就代表沒問題,前端一定也能跑」。恰恰相反:後端之間沒有 CORS,瀏覽器才有。把同一段程式碼原封不動搬到前端,正是 CORS 錯誤最常見的誕生方式。