为什么我在实际工作时会收到“Fetch failed loading”？答案

【问题标题】：Why do I get "Fetch failed loading" when it actually worked?为什么我在实际工作时会收到“Fetch failed loading”？
【发布时间】：2019-12-20 00:20:13
【问题描述】：

我使用以下代码通过 Fetch API 将用户位置发布到我自己的后端服务：

window.onload = () => {
    let getPosition = (options) => {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(resolve, reject, options);
        });
    };

    getPosition().then(pos => {
        const data = new FormData();
        data.append('latitude', String(pos.coords.latitude));
        data.append('longitude', String(pos.coords.longitude));

        fetch('/', {             // <--- error is thrown in this line
            method: 'POST',
            body: data
        }).then(response => {
            if (!response.ok) {
                throw Error('Data sent - Network response NOT OK');
            } else {
                console.log('Data sent - Network response OK')
            }
        });
    });
};

这可以完美运行，后端服务会发回一个积极的空响应。 Data sent - Network response OK 被记录在浏览器的控制台中，一切都很好，除了紧接着，它被记录了：

为什么我得到一个Fetch failed loading: POST，即使 POST 成功，响应正常并且 Chrome 网络选项卡中的状态代码是200 OK？我的代码有问题吗？

【问题讨论】：

您在“网络”选项卡中看到了哪个状态代码？
@SebastianSimon 200
您在网络标签正文中看到了什么？错误对象的其余部分是什么？
@epascarello 不确定 network 标签正文 是什么。如问题中所述，响应为空。我在哪里可以找到错误对象的其余部分？
我认为@epascarello 的意思是浏览器开发工具中的面板/选项卡，它的字面意思是网络。如果你去那个网络面板，你可以检查请求和响应——包括请求/响应主体，以及所有的标头。

标签： javascript google-chrome post fetch-api

【解决方案1】：

发生这种情况是因为您没有阅读空响应正文。我注意到了这一点，因为 Django 在服务器端触发了 broken pipe 错误。要解决此问题，只需读出空正文即可。

async function fetchSomething() {
    const response = await fetch(url, {
        method: 'POST'
    })
    await response.text()
    return response.ok
}

【讨论】：

【解决方案2】：

我的行为与您看到的相同。我的服务器以204（空响应）和空（内容长度=0）响应响应POST 请求。我尝试将其更改为仅以“ok”消息进行响应（编辑：实际上现在只是返回创建的对象）并且fetch 错误日志消失了。

在我看来，fetch（至少在 Chrome 中）在响应正文为空时错误地记录“Fetch Failed”，即使请求成功也是如此。

【讨论】：

我在响应正文中添加了一个字符，它现在可以工作了。
如果您要发回一个空响应，请使用状态码 204 EMPTY RESPONSE。现在无法测试它，但也许 fetch 不会记录任何错误。
@oemel09 我现在尝试使用 204，它还输出“失败”日志
@rewolf @oemel09 我改用 204 EMPTY RESPONSE 和 Express：res.status(204).send({})。值得注意的是，它仍然需要您发送一个空对象 ({})。我仍然认为204 是这里的正确选择，我希望我可以在某个时候删除 exmpty 对象。
@MiXT4PE @oemel09 我同意204 是最合适的！ :) 根据定义，我们不需要为该状态代码返回一个空对象{}。所以我认为fetch 那里的逻辑很糟糕。