“尝试获取资源时出现网络错误。”仅在火狐上答案

【问题标题】："NetworkError when attempting to fetch resource." only on Firefox“尝试获取资源时出现网络错误。”仅在火狐上
【发布时间】：2020-03-29 06:48:17
【问题描述】：

我正在使用fetch API 从我的前端发出POST 请求。但是当我在 Firefox 中尝试时，它不起作用。在 Chrome 中工作正常。

这就是我想要做的。

const handleSubmit = async event => {
        try {
            await fetch(`https://api.example.net/api/route?slug=example`, {
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                    'x-api-key': /* API KEY*/
                },
                body: JSON.stringify({
                    name,
                    email
                })
            })
                .then(response => console.log(response))
                .catch(err => console.log(err));
        } catch (error) {
            console.log(error);
        }
  };

【问题讨论】：

标签： javascript reactjs firefox fetch next.js

【解决方案1】：

如果您要发布到快速服务器，请确保在该服务器上的 POST 路由中使用了请求和响应对象。即使你只是返回 res.send()。其他解决方案都不适合我。

【讨论】：

【解决方案2】：

对我来说，这是添加 event.preventDefault() 的问题

【讨论】：

【解决方案3】：

在我的情况下这是一个 CORS 问题 - 浏览器阻止了 POST 请求，因为服务器未设置 Access-Control-Allow-Headers 响应标头。在服务器上将它设置为“*”就可以了。

【讨论】：

【解决方案4】：

所以，伙计们，这就是解决方案。

问题是刷新表单的时间，是在发送之前刷新。为了解决这个问题，设置在响应时刷新表单，就完成了！

const handleSubmit = async event => {
        event.preventDefault();
        try {
            await fetch(`https://api.example.net/api/route?slug=example`, {
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                    'x-api-key': /* API KEY*/
                },
                body: JSON.stringify({
                    name,
                    email
                })
            })
                .then(response => location.reload())
                .catch(err => console.log(err));
        } catch (error) {
            console.log(error);
        }
  };

【讨论】：