net::ERR_EMPTY_RESPONSE when API request is made in return of react

Question

First off this was working before but when I opened the code for further change to add redux it stopped working.

I am Sending the login Request from Axios to backend API. But when I click on submit button It does not seem to work. Even it does not print the console.log("I am in ") statement. But when I got to the network tab and see the xhr, I see the output attached in image. Last day it was working all of fine. But Now I am getting no response and even not a console statement to see if I am going in Submit form function.

Here Is my code SignIn.js

 let submitForm = (e) => {
        e.preventDefault();
        console.log("I am in ");  //button click not printing this statement but axios request is made

        let loginDataObject = {
            email: formDetails.userEmail,
            password: encryptThis(formDetails.LoginPassword)
        }
      
        // Axios request 
        const url = 'http://localhost:5000/api/v1/users/login'
        axios({
            method: 'post',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            data: loginDataObject
        })
        .then(res => {
                const status = res.status;
                const userEmail = res.data.data.user.email;
                if (status === 200) {
                    let userObject = {
                        email: JSON.stringify(userEmail),
                        tk: JSON.stringify(res.data.token)
                    }
                    localStorage.setItem('currentUser', JSON.stringify(userObject));
                }
            })
            .then(() => {
                history.push('/dashboard')
            })
            .catch(err => {
                // if password is incorrect
                console.log(err);
            })
        }

return (

   <input type="button" onClick={submitForm} className="btn btn-primary mainGreenBtnFullWidth" value="Log In" />
)

```

Answer 1

Most probably it is a network-related error. Based on the console log, it looks like your request doesn't reach the server and you don't have a response to check in your code. You could get similar errors because of a CORS error or DNS misconfigurations.

To catch these kinds of errors, since you don't have a response, you can write an Axios interceptor like this:

axios.interceptors.response.use(
      (response) => {
        return response;
      },
      (error) => {
        if (typeof error.response === "undefined") {
          console.log("network error");
          window.location.href = "/error-page";
        }
        if (error.response.status === 401) {
          // Authorization error
          window.location.href = "/signin";
        } else if (error.response.status === 500) {
          // Server error
          window.location.href = "/500-error";
        } else {
          return Promise.reject(error);
        }
      }
);

Of course, this doesn't solve your actual problem, but you can improve the user experience by showing some kind of error.