`mode: 'no-cors'` 失敗時，如何使用 Fetch 存取不同來源的資源？

嘗試使用Fetch with mode: no-cors

在本文中，我們將解決使用fetch with mode 的問題： 「no- cors」並探索禁用CORS 的可行替代方案。

了解問題

當嘗試從不同來源存取資源（例如外部 API）時，瀏覽器會實作稱為同源策略的安全措施。此策略可防止 JavaScript 程式碼直接存取其他來源的資源，除非伺服器使用適當的 CORS 標頭進行回應。

當您遇到錯誤「請求的資源上不存在「Access-Control-Allow-Origin」標頭時，」這表示您嘗試從中獲取資料的伺服器不允許從您當前的來源訪問其資源。

停用CORS

要注意的是，在取得請求中設定 mode: 'no-cors' 實際上並不會停用 CORS。相反，它會阻止您的前端 JavaScript 程式碼存取回應正文和標頭。在大多數情況下，這不是您想要做的。

使用 CORS 代理

建議的解決方案是使用 CORS 代理程式。 CORS 代理程式充當前端程式碼和目標伺服器之間的中介。它向目標伺服器發出請求，接收回應，添加必要的 CORS 標頭，然後將修改後的回應傳遞回前端程式碼。這允許您的前端程式碼存取資源，而不會直接違反同源策略。

部署您自己的 CORS 代理

您可以按照以下步驟輕鬆部署您自己的 CORS Anywhere 代理：

1. 複製 CORS Anywhere 儲存庫： gitclone https://github.com/Rob--W/cors-anywhere.git
2. 切換到cors-anywhere目錄：cd cors-anywhere/
3. 安裝依賴：npm install
4. 建立Heroku 應用程式：heroku create
5. 將程式碼推送到Heroku：git push heroku master

完成這些步驟後，您將擁有在 Heroku 上運行的自己的 CORS Anywhere 伺服器。

使用CORS 代理

要使用您的CORS 代理，只需在您的請求URL 前面添加代理URL，例如：

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

透過使用CORS 代理，您可以繞過同源策略並在前端程式碼中存取不同來源的資源。

以上是`mode: 'no-cors'` 失敗時，如何使用 Fetch 存取不同來源的資源？的詳細內容。更多資訊請關注PHP中文網其他相關文章！