Firefox gives Network Error whereas other browsers work just fine (ReactJS App)

Question

I made a web app using React.js and Im making calls to the backend through Axios.

However, Firefox keeps giving me a Network error when awaiting a response from the Server. Other browsers such as Chrome, Safari, Opera work just fine.

Code for the request:

export function postLoginDetails(username, password, token) {
const url = ENV.host + "/login";

return axios({
    method: 'post',
    url: url,
    withCredentials: true,
    headers: {
        "X-CSRFToken": token
    },
    data: {
        username: username,
        password: password,
    },
    responseType: 'json'
   }).catch(e => console.log(e))
}

Heres the code where the error occurs: res is undefined.

postLoginDetails(username, password, this.token).then((res) => {
                if (res.data.success) {
                    this.isAuthenticated.set(true)
                    cb();
                } else {
                    this.error.set(true);
                    this.errorText = observable('Fehler aufgetreten');
                    this.name = observable('');
                }
                this.loginLoading.set(false);
            })

Heres the error in Firefox

Answer 1

For others experiencing this issue, I can't speak to the pre-flight option stuff, but I do know that firefox is telling axios to kill the request. If you look at the section of axios that handles the error, you see the comment:

// Handle browser request cancellation (as opposed to a manual cancellation)

So it's some sort of browser quirk. I wasn't using a button to trigger the request, but an anchor tag <a>. It started working when I changed that to a <span> instead. Why, firefox?