“尝试获取资源时出现网络错误。”仅适用于 Firefox

Question

我正在使用

POST

API 从前端发出

fetch

请求。但当我在 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);
        }
  };

Answer 1

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

Answer 2

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

问题是刷新表单的时间，正在刷新然后发送。要解决此问题，请设置在响应时刷新表单，然后完成！

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

Answer 3

在我的例子中这是一个 CORS 问题 - 浏览器阻止了 POST 请求，因为服务器未设置

Access-Control-Allow-Headers

响应标头。在服务器上将其设置为“*”即可完成工作。

Answer 4

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

Answer 5

如果您是第一次编写 Firefox 插件，则会出现此错误。但通常的解决方案不起作用。

需要

manifest.json

中的“localhost”权限才能访问本地服务器。

  "permissions": [
    "storage",
    "*://localhost/*"
  ],

如果需要增强安全性，您可以按名称将多个服务器列入白名单。

"permissions": [
    "https://your-server/data", "http://chathost.ru", 
]

来自 https://github.com/JakeChampion/fetch/issues/310