當請求實際上沒有失敗時收到“TypeError：無法取得”

Question

我在我的 React 應用程式中使用 fetch API。該應用程式部署在伺服器上並且運作良好。我測試了多次。但是，應用程式突然停止工作，我不知道為什麼。問題是，當我發送 get 請求時，我收到了來自伺服器的有效回應，但 fetch API 也捕獲了異常並顯示 TypeError: Failed to fetch 。我什至沒有對程式碼進行任何更改，這是所有 React 元件的問題。

我收到了有效的回覆：

但同時也收到此錯誤：

fetch(url)
.then(res => res.json())
.then(data => {
  // do something with data
})
.catch(rejected => {
    console.log(rejected);
});

當我刪除憑證：「include」時，它可以在本機上運行，但不能在伺服器上運行。

我嘗試了 StackOverflow 和 GitHub 上給出的所有解決方案，但它對我來說不起作用。

Answer 1

我知道這個問題可能有特定於 React 的原因，但它首先出現在「Typeerror: Failed to fetch」的搜尋結果中，我想在這裡列出所有可能的原因。

Fetch 規格列出了從 Fetch API 引發 TypeError 的時間：https:// fetch.spec.whatwg.org/#fetch-api

#截至 2021 年 1 月的相關段落如下。這些是文本的摘錄。

4.6 HTTP 網路取得

使用給定的物件物件填入 headers 物件標頭：

方法步驟有時會拋出類型錯誤：

在「Body mixin」部分中，如果您使用 FormData，有多種方法可以引發 TypeError。我沒有在這裡列出它們，因為這會使答案變得很長。相關段落：https://fetch.spec.whatwg.org/#body-mixin

#在「Request Class」部分中，新的 Request(input, init) 建構子是潛在型別錯誤的雷區：

在 Response 類別中：

在「取得方法」部分

除了這些潛在問題之外，還有一些特定於瀏覽器的行為可能會引發 TypeError。例如，如果您將 keepalive 設為 true 並且有效負載 > 64 KB，您將在 Chrome 上收到 TypeError，但相同的請求可以在 Firefox 中工作。這些行為沒有記錄在規範中，但您可以透過 Google 搜尋來查找有關它們的信息，以了解您在 fetch 中設定的每個選項的限制。

Answer 2

這可能是您從後端收到的回應有問題。如果它在伺服器上運作正常，那麼問題可能出在回應標頭中。

檢查回應標頭中 Access-Control-Allow-Origin 的值。通常，當回應標頭的 Access-Control-Allow-Origin 與請求的來源不符時，即使收到回應，fetch API 也會拋出無法取得的錯誤。