JavaScript取得資料時出現跨網域請求錯誤，如何解決？

嘗試透過Fetch 停用CORS 並處理「Access-Control-Allow-Origin」

您遇到了一個常見的挑戰：嘗試使用Fetch 從客戶端JavaScript 程式碼發出跨來源請求。您收到的錯誤訊息表示您嘗試提取的端點不包含跨來源存取所需的「Access-Control-Allow-Origin」標頭。

問題： 您嘗試在 Fetch 中使用 object { mode: 'no-cors' } 來停用 CORS，但這種方法是不正確。

為什麼「no-cors」模式不起作用：

設定模式：Fetch 中的「no-cors」不會停用CORS；相反，它告訴瀏覽器阻止前端JavaScript 存取響應正文和標頭。此設定通常是不可取的，因為您通常希望程式碼能夠存取回應。

解決方案：CORS 代理

此問題的解決方案在於使用 CORS 代理。 CORS 代理程式充當前端程式碼和遠端端點之間的中介，透過修改回應標頭來啟用跨來源請求。

透過使用 CORS 代理，您可以透過代理轉發您的請求，這將添加回應中必需的 Access-Control-Allow-Origin 標頭。這允許您的前端程式碼存取回應正文和標頭，就像它們來自同一來源一樣。

部署您自己的代理

部署您的代理的簡單方法自己的CORS 代理是按照以下步驟操作：

1. 克隆cors-anywhere GitHub 儲存庫(https://github.com/Rob--W/cors-anywhere)。
2. 使用 npm install 安裝依賴項。
3. 建立 Heroku 帳戶並執行 heroku create。
4. 使用 git push heroku master 將您的程式碼推送到 Heroku。

部署後，您將擁有一個正在運行的 CORS代理位於 https://cryptic-headland-94862.herokuapp.com 之類的 URL。

在請求 URL 前新增代理 URL

要使用代理，只需在您的請求 URL 前加上代理 URL 即可。例如，如果您想要取得https://example.com，則可以使用以下URL：

https://cryptic-headland-94862.herokuapp.com/https://example.com

透過在請求URL 中新增代理前綴，您將能夠成功發出跨來源請求，這要歸功於由代理程式新增的Access-Control-Allow-Origin 標頭代理程式。

其他注意事項：

• Postman 可以存取端點，因為它是忽略同源限制的偵錯工具。
• 在 Fetch 中使用 mode: 'no-cors' 或 mode: 'opaque' 不是正確的方法停用 CORS。
• CORS 是一項安全措施，重要的是不要隨意繞過它。在停用 CORS 限制之前，請務必考慮安全影響。

以上是JavaScript取得資料時出現跨網域請求錯誤，如何解決？的詳細內容。更多資訊請關注PHP中文網其他相關文章！