跳到主要內容

CORS:為什麼您的 fetch 積木不工作

如果您使用 fetch、HTTP 或網路擴充功能,而請求總是失敗,即使您已允許,原因幾乎總是 CORS。這是瀏覽器安全功能,不是 Bilup 或擴充功能的 bug。

什麼是 CORS

CORS(跨源資源共享)是網站宣告是否允許其他網站讀取其響應的方式。它解決的問題很簡單:有些網站想阻止其他網站的存取(想像一下,您存取的任何頁面都能在您登入時讀取您的銀行帳戶),有些網站則想允許存取。

預設情況下,網站允許跨源存取。網站必須通過傳送 Access-Control-Allow-Origin 頭來主動選擇開放。Scratch API 的部分內容選擇了開放,這就是 Bilup 能從 Scratch 載入專案的原因。當網站沒有選擇開放時,瀏覽器會阻止 Bilup 讀取響應,您會得到一個通用的網路錯誤。

這是由瀏覽器本身強制執行的。Bilup 無法在網頁上覆蓋它。

如何解決

這取決於您獲取該 URL 的原因。

  • 使用不同的 URL。 如果您只是託管靜態檔案,請將它們移到支援帶 CORS 的直接下載的主機上。如果一個 API 阻止 CORS,請檢查是否有替代 API 允許它。
  • 使用 CORS 代理。 CORS 代理是另一個伺服器,它為您獲取 URL 並重新發送帶 CORS 頭的響應。公共代理確實存在,但通常很短命,因為運營成本高且被嚴重濫用。Bilup 不提供代理。
  • 在桌面版或打包建置中執行專案。 這些不受瀏覽器 CORS 規則約束(見下文)。

桌面版和打包專案

使用Bilup 打包器打包為 Electron 應用的專案預設繞過 CORS,就像原生應用一樣,因此 fetch 積木可以存取任何 URL。

打包後以普通 HTML 檔案在瀏覽器中執行的專案仍受正常瀏覽器 CORS 規則約束,因為它們仍然是網站。

如果您執行伺服器

如果您控制被 fetch 的伺服器,並且希望網站能夠讀取它,請在您想公開的響應上設定 Access-Control-Allow-Origin 頭為 *。搜尋您的 Web 伺服器或框架的名稱加 "cors" 會找到示例。

另請參閱