为啥我在实际工作时会收到“Fetch failed loading”？

Posted 2023-02-27

【中文标题】为啥我在实际工作时会收到“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 的意思是浏览器开发工具中的面板/选项卡，它的字面意思是网络。如果你去那个网络面板，你可以检查请求和响应——包括请求/响应主体，以及所有的标头。

【参考方案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 那里的逻辑很糟糕。