chrome · JavaScript
報錯原文
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
這是什麼意思
請求到達了伺服器，回應也回來了，但那個回應裡沒有允許這個來源的標頭，於是瀏覽器拒絕把它交給你的 JavaScript。只有瀏覽器執行這條規則，所以同一個位址用 curl 就能通——看起來像是伺服器沒問題、只有瀏覽器壞了。要改的地方永遠在伺服器：給回應加上 Access-Control-Allow-Origin: http://localhost:3000。前端什麼也做不了；如果伺服器不是你的，經由自己的伺服器轉發就是唯一的路。Allow-Origin: * 對攜帶 cookie 的請求無效，那種情況必須寫出確切來源，並同時開啟 Allow-Credentials。
怎麼修
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- 來自
- chrome
- JavaScript
- 15
瀏覽器和 node 的錯誤通常只告訴你什麼壞了，不告訴你那個值為什麼變成這樣——你讀了 undefined、它不是函式、它不是 JSON——所以該修的地方在拋錯那一行的上游；只用 ?. 和預設值把那一行按住，同樣的問題會在更遠的地方、以更難辨認的樣子回來。
怎麼讀報錯
- 從第一行往下讀。越往下越是工具內部的事，起因通常寫在最上面。
- 有檔名和行號就從那裡查——不是堆疊最上面那一格，而是最上面那條提到你自己寫的檔案的行。
- 把報錯原文照樣去搜，但先去掉你自己的路徑和變數名，正是那些讓搜尋比對不上。
- 同一種情況在不同版本裡措辭不同。結果不對頭，就把版本號一起加進查詢。
- 貼上修法之前，先確認它會丟掉什麼。這裡面有些是不能收回的。
常見問題
Q. “Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.” 是什麼意思？
請求到達了伺服器，回應也回來了，但那個回應裡沒有允許這個來源的標頭，於是瀏覽器拒絕把它交給你的 JavaScript。只有瀏覽器執行這條規則，所以同一個位址用 curl 就能通——看起來像是伺服器沒問題、只有瀏覽器壞了。要改的地方永遠在伺服器：給回應加上 Access-Control-Allow-Origin: http://localhost:3000。前端什麼也做不了；如果伺服器不是你的，經由自己的伺服器轉發就是唯一的路。Allow-Origin: * 對攜帶 cookie 的請求無效，那種情況必須寫出確切來源，並同時開啟 Allow-Credentials。
Q. 怎麼修？
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data —— 執行前先看上面的說明，確認這條命令會丟掉什麼。
Q. 這是哪個工具報的？
chrome。它屬於JavaScript，報錯原文有 23 個詞。