axios POST request not working when deploying to AWS amplify

Question

I have a website that is deployed on aws amplify, but for some reason the post requests do not work. Here is the code for the axios function:

SendMail = async (e) => {
        e.preventDefault;
        if (this.state.name !== '' && this.state.email !== '' && this.state.message !== '' && this.state.subject !== '') {

            await axios({
                method: 'POST',
                url: `/api/email`,
                headers: {
                    'Content-Type': 'application/json',
                    },
                data: {
                    subject: `tarasddas`,
                    body: `adsaadsasdas`
                }
            })
                .then(
                    (res) => {
                        alert(res.status)
                    }
        
                ).catch(
                    (e) => { console.log(e) }
                )
        }
    }

The function works on local host, but when I deploy it nothing happens. I get the error : Error: Network Error, but that also happens on local host so I do not think that this is the issue. Likewise, the endpoint also works. I have tested the endpoint using Postman without any issue. I looked at the logs and saw this:

It is a summary of the request and is for some reason in red with no status code. I think that this could be due to the Network error as the same thing happens on local host. From what I saw the post request is being made to the endpoint on axios but for some reason it does not seem to work. I would appreciate any help.

Why does everyone feel the need to mess with content-type headers? The Axios defaults based on the type of `data` used are almost always adequate — Phil, Mar 21 '22 at 01:47
Does this answer your question? [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — Phil, Mar 22 '22 at 02:10

score 0 · Accepted Answer · answered Mar 22 '22 at 01:53

Ok so I was able to find the issue. My axios requests had been working on chrome but not on safari. The solution was to change the button I was using to call the request. This was before:

<button onClick={(e) => this.SendMail(e)} className="btn table">Send</button>

To fix the issue I added type= "button" like this:

<button type="button" onClick={(e) => this.SendMail(e)} className="btn table">Send</button>

I got the solution from this post: Network error from Axios in Safari but not Chrome (Firefox whole other question)

axios POST request not working when deploying to AWS amplify

1 Answers1