为何实际工作时会出现“获取失败的加载”？

Question

我使用以下代码通过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已记录在浏览器的控制台中，并且一切都很好，除了在此之后立即记录下来：

即使POST成功完成，响应正常且Chrome网络标签中的状态代码为Fetch failed loading: POST，我怎么得到200 OK？我的代码有问题吗？

---

编辑：有些人似乎不太了解。该错误由Chrome而不是我的catch()块之一写入控制台。为了确保理解这一点，我从上面的代码中删除了它们，因为它们没有捕获任何东西。

编辑2 ：您可以在https://thewthr.app上查看现实生活中的错误

编辑3 ：我仅在Google Chrome浏览器中观察到了

Answer 1

我的行为与您看到的相同。 我的服务器以POST（空响应）和空（Content-Length = 0）响应来响应204请求。 我尝试将其更改为仅显示一条“确定”消息（编辑：实际上现在只是返回创建的对象），并且fetch错误日志消失了。

在我看来，即使请求成功，fetch（至少在Chrome中）错误地在响应正文为空时记录“获取失败”。

Answer 2

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

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