„TypeError: Unable to get“ wird empfangen, obwohl die Anfrage nicht wirklich fehlgeschlagen ist

Question

Ich verwende die Fetch-API in meiner React-Anwendung. Die Anwendung wird auf dem Server bereitgestellt und läuft einwandfrei. Ich habe es mehrmals getestet. Allerdings funktionierte die App plötzlich nicht mehr und ich weiß nicht warum. Das Problem besteht darin, dass ich beim Senden der get-Anfrage eine gültige Antwort vom Server erhalte, die Abruf-API jedoch auch die Ausnahme abfängt und TypeError: Failed to fetch anzeigt ; . Ich habe nicht einmal Änderungen am Code vorgenommen und dies ist ein Problem bei allen React-Komponenten.

Ich habe eine gültige Antwort erhalten:

Aber ich bekomme auch diese Fehlermeldung:

fetch(url)
.then(res => res.json())
.then(data => {
  // etwas mit Daten machen
})
.catch(rejected => {
    console.log(abgelehnt);
});

Wenn ich die Anmeldeinformationen entferne: „include“, funktioniert es auf localhost, aber nicht auf dem Server.

Ich habe alle auf StackOverflow und GitHub angebotenen Lösungen ausprobiert, aber es hat bei mir nicht funktioniert.

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 也会抛出无法获取的错误。