当请求实际上没有失败时收到“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 也会抛出无法获取的错误。