Javascript 当请求实际上没有失败时，得到“TypeError: failed to fetch”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49343024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting "TypeError: failed to fetch" when the request hasn't actually failed
提问by Amanshu Kataria
I'm using fetch APIwithin my React app. The application was deployed on a server and was working perfectly. I tested it multiple times. But, suddenly the application stopped working and I've no clue why. The issue is when I send a getrequest, I'm receiving a valid response from the server but also the fetch API is catching an exception and showing TypeError: failed to fetch. I didn't even made any changes to the code and it's the issue with all of the React components.
我在我的 React 应用程序中使用了fetch API。该应用程序部署在服务器上并且运行良好。我测试了多次。但是，突然应用程序停止工作，我不知道为什么。问题是当我发送get请求时，我收到了来自服务器的有效响应，但 fetch API 正在捕获异常并显示TypeError: failed to fetch. 我什至没有对代码进行任何更改，这是所有 React 组件的问题。
I'm getting a valid response.
我得到了有效的回应。
But also getting this error at the same time.
但同时也得到这个错误。
fetch(url)
.then(res => res.json())
.then(data => {
// do something with data
})
.catch(rejected => {
console.log(rejected);
});
When I remove credentials: "include", it works on localhost, but not on the server.
当我删除时credentials: "include"，它适用于本地主机，但不适用于服务器。
I tried every solution given on StackOverflow and GitHub, but it's just not working out for me.
我尝试了 StackOverflow 和 GitHub 上给出的所有解决方案，但对我来说并不奏效。
采纳答案by yugantar
The issue could be with the response you are receiving from back-end. If it was working fine on the server then the problem could be with the response headers. Check the Access-Control-Allow-Origin(ACAO) in the response headers. Usually react's fetch API will throw fail to fetch even after receiving response when the response headers' ACAO and the origin of request won't match.
问题可能与您从后端收到的响应有关。如果它在服务器上运行良好，那么问题可能出在响应标头上。检查响应标头中的Access-Control-Allow-Origin(ACAO)。通常，当响应头的 ACAO 和请求的来源不匹配时，即使在收到响应后，react 的 fetch API 也会抛出失败。
回答by naholyr
Note that there is an unrelated issue in your code but that could bite you later: you should return res.json()or you will not catch any error occurring in JSON parsing or your own function processing data.
请注意，您的代码中存在一个不相关的问题，但稍后可能会困扰您：您应该return res.json()或不会捕获在 JSON 解析或您自己的函数处理数据中发生的任何错误。
Back to your error: You cannothave a TypeError: failed to fetchwith a successful request. You probably have another request (check your "network" panel to see all of them) that breaks and causes this error to be logged. Also, maybe check "Preserve log" to be sure the panel is not cleared by any indelicate redirection. Sometimes I happen to have a persistent "console" panel, and a cleared "network" panel that leads me to have error in console which is actually unrelated to the visible requests. You should check that.
回到你的错误：你不能有TypeError: failed to fetch一个成功的请求。您可能有另一个请求（检查您的“网络”面板以查看所有请求）中断并导致记录此错误。此外，也许检查“保留日志”以确保面板不会被任何不雅的重定向清除。有时我碰巧有一个持久的“控制台”面板和一个清除的“网络”面板，导致我在控制台中出现错误，这实际上与可见请求无关。你应该检查一下。
Or you (but that would be vicious) actually have a hardcoded console.log('TypeError: failed to fetch')in your final .catch;) and the error is in reality in your .then()but it's hard to believe.
或者你（但那将是恶毒的）实际上console.log('TypeError: failed to fetch')在你的最终.catch;) 中有一个硬编码，并且错误实际上存在于你中，.then()但很难相信。
回答by S. Hristov
I have a similar problem and as I'm newbie, here are some facts for somebody to comment:
我有一个类似的问题，因为我是新手，这里有一些事实供某人评论：
I'm sending form data to Google sheet this way (scriptURL is https://script.google.com/macros/s/AKfy..., showSuccess()is showing a simple image):
我通过这种方式将表单数据发送到 Google 工作表（scriptURL 是https://script.google.com/macros/s/AKfy...，showSuccess()显示的是一个简单的图像）：
fetch(scriptURL, {method: 'POST', body: new FormData(form)})
.then(response => showSuccess())
.catch(error => alert('Error! ' + error.message))
Executed in Edge my HTML doesn't show error and Network tab reports this 3 requests:
Executed in Chrome my HTML (index.htm) shows Failed to fetcherror and Network tab reports this 2 requests:
The value in the second column is blocked:otherand there is also an error in Console tab:
在 Edge 中执行我的 HTML 没有显示错误并且网络选项卡报告这 3 个请求：
在 Chrome 中执行我的 HTML (index.htm) 显示无法获取错误并且网络选项卡报告这两个请求：
第二列中的值被阻止：其他，控制台选项卡中也有一个错误：
GET https://script.googleusercontent.com/macros/echo?user_content_key=D-ABF... net::ERR_BLOCKED_BY_CLIENT
获取https://script.googleusercontent.com/macros/echo?user_content_key=D-ABF... net::ERR_BLOCKED_BY_CLIENT
In order to suspend installed Chrome extensions, I executed my code in an Incognito window and there is no error message and Network tab reports this 2 requests:
为了暂停已安装的 Chrome 扩展程序，我在隐身窗口中执行了我的代码并且没有错误消息并且网络选项卡报告了这 2 个请求：
My guess is that something (extension?) prevents Chrome to read the request's answer (the GET request is blocked).
我的猜测是某些东西（扩展？）阻止 Chrome 读取请求的答案（GET 请求被阻止）。
