Network error from Axios in Safari but not Chrome (Firefox whole other question)

Question

I have the following Axios put request in my react app. It's calling a Spring RestRepository resource.

  axios.put(journal._links.self.href, journal)
       .then(response => alert("Responded: " + JSON.stringify(response)))
       .catch((error)=> {
           if (error.response) {
               // The request was made and the server responded with a status code
               // that falls out of the range of 2xx
               alert('Data: ' + error.response.data);
               alert('Status: ' + error.response.status);
               alert('Headers: ' + error.response.headers);
           } else if (error.request) {
               // The request was made but no response was received
               // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
               // http.ClientRequest in node.js
               alert('Request: ' + JSON.stringify(error.request));
               alert('Error: ' + error.message);
           } else {
               // Something happened in setting up the request that triggered an Error
               alert('Error: ' + error.message);
           }
       })

In Chrome, I get the expected "Responded" response. But in Safari, I get

Request: {}
Error: Network Error

With Firefox, no alert boxes are generated at all but the console shows

NS_ERROR_XPC_SECURITY_MANAGER_VETO

Any ideas on how to track down the source of the error

Answer 1

Apparently, the issue was that I had the submit button defined using

<button
    onClick={this.doSave}
>
   Save Changes
</button>

This has a default type of submit so there was a race condition as Safari/Firefox attempted to submit the form. Adding type="button" to the button tag took care of that issue and everything works as expected.