我在我的 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);
});
当我删除凭据时：“包含”，它适用于本地主机，但不适用于服务器。
我尝试了 StackOverflow 和 GitHub 上给出的所有解决方案，但对我来说并不奏效。
问题可能与您从后端收到的响应有关。如果它在服务器上运行良好，那么问题可能出在响应标头上。检查响应标头中的Access-Control-Allow-Origin (ACAO)。通常，当响应头的 ACAO 和请求的来源不匹配时，即使在收到响应后，react 的 fetch API 也会抛出失败。
我知道这个问题可能有特定于 React 的原因，但它首先出现在“Typeerror: Failed to fetch”的搜索结果中，我想在这里列出所有可能的原因。
Fetch 规范列出了从 Fetch API 抛出 TypeError 的次数：https : //fetch.spec.whatwg.org/#fetch-api
截至 2021 年 1 月的相关段落如下。这些是从文本中摘录的。
4.6 HTTP-网络获取
要使用带有可选凭据标志的请求执行 HTTP 网络提取，请运行以下步骤：
...
16. 并行运行这些步骤：
...
2. 如果中止，则：
...
3. 否则，如果流是带有 TypeError 的可读错误流。
要将名称/值名称/值对附加到 Headers 对象（标头），请运行以下步骤：
- 标准化值。
- 如果名称不是名称或值不是值，则抛出 TypeError。
- 如果 headers 的守卫是“不可变的”，那么抛出一个 TypeError。
使用给定的对象对象填充 Headers 对象标题：
要使用给定的对象对象填充 Headers 对象标题，请运行以下步骤：
- 如果 object 是一个序列，则对于 object 中的每个标头：
- 如果 header 不包含正好两个项目，则抛出 TypeError。
方法步骤有时会抛出 TypeError：
delete(name) 方法步骤是：
- 如果 name 不是名称，则抛出 TypeError。
- 如果这个守卫是“不可变的”，那么抛出一个类型错误。
get(name) 方法步骤是：
- 如果 name 不是名称，则抛出 TypeError。
- 返回从 this 的标题列表中获取 name 的结果。
has(name) 方法步骤是：
- 如果 name 不是名称，则抛出 TypeError。
set(name, value) 方法步骤是：
- 标准化值。
- 如果名称不是名称或值不是值，则抛出 TypeError。
- 如果这个守卫是“不可变的”，那么抛出一个类型错误。
要从对象中提取主体和
Content-Type值，使用可选的布尔值 keepalive（默认为 false），请运行以下步骤：
...
5. 打开对象：
...
ReadableStream
如果 keepalive 为 true，则抛出 TypeError。
如果对象受到干扰或锁定，则抛出 TypeError。
在“Body mixin”部分，如果您使用 FormData，有几种方法可以抛出 TypeError。我没有在这里列出它们，因为它会使这个答案很长。相关段落：https : //fetch.spec.whatwg.org/#body-mixin
在“请求类”部分中，新的 Request(input, init) 构造函数是潜在类型错误的雷区：
new Request(input, init) 构造器步骤是：
...
6. 如果输入是字符串，则：
...
2. 如果 parsedURL 失败，则抛出 TypeError。
3. 如果 parsedURL 包含凭据，则抛出 TypeError。
...
11. 如果 init["window"] 存在且非空，则抛出 TypeError。
...
15. 如果 init["referrer" 存在，则：
...
1. 让referrer 为 init["referrer"]。
2. 如果referrer 为空字符串，则将请求的referrer 设置为“no-referrer”。
3. 否则：
1. 将parsedReferrer 设为使用baseURL 解析referrer 的结果。
2. 如果parsedReferrer 失败，则抛出TypeError。
...
18. 如果模式是“导航”，则抛出一个类型错误。
...
23. 如果请求的缓存模式是“only-if-cached”并且请求的模式不是“same-origin”，则抛出 TypeError。
...
27. 如果 init["method"] 存在，则：
...
2. 如果方法不是方法或方法是禁止方法，则抛出 TypeError。
...
32. 如果此请求的模式为“no-cors”，则：
1. 如果此请求的方法不是 CORS 安全列表方法，则抛出 TypeError。
...
35. 如果 init["body"] 存在且非空或 inputBody 非空，并且请求的方法是GETorHEAD，则抛出 TypeError。
...
38。
1.如果这个请求的模式既不是“同源”也不是“cors”，那么抛出一个TypeError。
...
39. 如果 inputBody 是 body 并且 input 被干扰或锁定，则抛出 TypeError。
clone() 方法步骤是：
- 如果这受到干扰或锁定，则抛出 TypeError。
在响应类中：
新的 Response(body, init) 构造器步骤是：
...
2. 如果 init["statusText"] 与原因短语标记产生不匹配，则抛出 TypeError。
...
8. 如果 body 为非空，则：
1. 如果 init["status"] 为 null body status，则抛出 TypeError。
...
静态redirect(url, status) 方法步骤是：
...
2. 如果parsedURL 失败，则抛出TypeError。
clone() 方法步骤是：
- 如果这受到干扰或锁定，则抛出 TypeError。
在“获取方法”部分
fetch(input, init) 方法步骤是：
...
9. 并行运行以下内容：
要处理响应的响应，请运行以下子步骤：
...
3. 如果响应是网络错误，则使用 TypeError 拒绝 p并终止这些子步骤。
除了这些潜在问题之外，还有一些特定于浏览器的行为可能会引发 TypeError。例如，如果您将 keepalive 设置为 true 并且有效负载 > 64 KB，您将在 Chrome 上收到 TypeError，但相同的请求可以在 Firefox 中工作。这些行为没有记录在规范中，但您可以通过谷歌搜索找到有关您在 fetch 中设置的每个选项的限制的信息。
我知道这是一篇相对较旧的帖子，但是，我想分享对我有用的内容：我只是在 url 中的“localhost”之前输入了“http://”。希望它可以帮助某人。
如果您在 localhost 服务器上调用 fetch，请使用非 SSL，除非您拥有 localhost 的有效证书。fetch 将在无效或自签名证书上失败，尤其是在本地主机上。
请注意，您的代码中存在一个不相关的问题，但稍后可能会困扰您：您应该return res.json() 或不会捕获在 JSON 解析或您自己的函数处理数据中发生的任何错误。
回到你的错误：你不能有TypeError: failed to fetch一个成功的请求。您可能有另一个请求（检查您的“网络”面板以查看所有请求）中断并导致记录此错误。另外，也许检查“保留日志”以确保面板不会被任何不礼貌的重定向清除。有时我碰巧有一个持久的“控制台”面板和一个清除的“网络”面板，导致我在控制台中出现错误，这实际上与可见请求无关。你应该检查一下。
或者你（但那会是恶毒的）实际上console.log('TypeError: failed to fetch')在你的最终.catch;) 中有一个硬编码，并且错误实际上在你的.then()但很难相信。