next.js “尝试获取资源时出现NetworkError,“仅限Firefox

x7yiwoj4 于 2023-04-30 发布在其他

关注(0)|答案(4)|浏览(152)

我正在使用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);
        }
  };

next.js

来源：https://stackoverflow.com/questions/59176488/networkerror-when-attempting-to-fetch-resource-only-on-firefox

4条答案

按热度按时间

e4yzc0pl1#

对我来说，这是一个添加事件的问题。public void run（）

赞(0）回复(0）举报 2023-04-30

ktca8awb2#

所以，伙计们，解决办法是。
问题是刷新表单的时间，在发送之前刷新。要解决这个问题，设置为在响应时刷新表单，就完成了！

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);
        }
  };

赞(0）回复(0）举报 2023-04-30

vu8f3i0k3#

在我的例子中，这是一个CORS问题--浏览器阻止了POST请求，因为服务器没有设置Access-Control-Allow-Headers响应头。在服务器上将其设置为“*”完成了这项工作。

赞(0）回复(0）举报 2023-04-30

dpiehjr44#

如果您要向Express服务器发送邮件，请确保在该服务器上的POST路由中使用了请求和响应对象。即使你只是返回res。send（）。其他解决方案都不适合我。

赞(0）回复(0）举报 2023-04-30