"NetworkError when attempting to fetch resource." only on Firefox

Question

I'm doing a POST request from my frontend using fetch API. But when I tried in Firefox, it doesn't work. In Chrome works fine.

Here's what I'm trying to do.

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

Pergrim

Answer 1

So, guys, here's the solution.

The problem was the time for refreshing the form, is refreshing before send it. To solve this, set to refresh the form on response, and is done!

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

Pergrim

Answer 2

For me it was a matter of adding event.preventDefault()

Roesler

Answer 3

It was a CORS problem in my case - the browser blocked the POST request because Access-Control-Allow-Headers response header wasn't set by the server. Setting it to '*' on the server did the job.

Grajeda

Answer 4

If you're posting to an express server, make sure that the request and response objects are being used in your POST route on that server. Even if you just return res.send(). None of the other solutions worked for me.

Pandich

Answer 5

If you are writing a Firefox plugin for the first time, this error comes up. But the usual solutions won't work.

Need "localhost" permission in manifest.json to access local servers.

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

You can whitelist several servers by name if there is a need to impress security.

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

From https://github.com/JakeChampion/fetch/issues/310

Overage