AxiosError on POST request is giving ERR_BAD_RESPONSE on my ReactJS Code

Question

I am creating a ReactJS and NodeJS application. While authenticating my user on route 'localhost:5000/user/signup' Internal server error with code 500 is received. For authenticating my user , I am using this auth.js file

import * as api from '../api'

export const signup=(authData,navigate)=>async(dispatch)=>{
    try {
        const response=await api.signUp(authData)
        let data=response.data;
        dispatch({type:"AUTH", data})
        navigate('/')
    } catch (error) {
        console.log(error)
    }
}

Here, on line 5 , authdata is where I think the error is. Maybe axios data format for response or something. The signUp function is as follows:

import axios from 'axios'

const API=axios.create({baseURL:'http://localhost:5000'})


export const signUp=(authData)=>API.post('/user/signup',authData,{headers:{"Content-Type" : "application/json"}})

And the function call is set from a form submit button, whose code snippet is as follows: The code snippet includes the format of data which I am passing.

let data=JSON.stringify({
                name:name,
                email:email,
                password:password
            });
            dispatch(signup(data),navigate)

The error is something like this, everytime I click on submit button:

AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_RESPONSE"
config
: 
{transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message
: 
"Request failed with status code 500"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
: 
{data: {…}, status: 500, statusText: 'Internal Server Error', headers: {…}, config: {…}, …}
[[Prototype]]
: 
Error

500 is server error, so you need to check with your backend team 😛 — KcH
– KcH, Commented Oct 3, 2022 at 11:00

Fatorice · Accepted Answer · 2022-10-03 11:35:00Z

4

As the statusText (Internal Server Error) suggests, you got a server error. The issue is not in your written code. Status Codes >=500 give you a hint, that the issue is within the called server. Everything in the range of >=400 and <500 hints to an error of the request itself (e.g. 404 means, that the requested resource doesn't exist, the method (POST/GET/...) isn't supported, etc. So take a look at your server logs, you'll find the issue there.

answered Oct 3, 2022 at 11:35

Fatorice

7724 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tony Zampogna · Accepted Answer · 2023-11-20 15:41:18Z

0

I had to tell Axios that 500 errors are valid. I did this by passing the validateStatus parameter to my Axios request.

Example:

  return axios
    .get(url, {
      params: flattenedParams,
      validateStatus: (status: number): boolean => { return status >= 200 }
    })
    .then((response: AxiosResponse) => {
      if (response.status == 500) {
        throw new Error("error from server");
      }
      return response;
    });

answered Nov 20, 2023 at 15:41

Tony Zampogna

2,0961 gold badge14 silver badges15 bronze badges

Collectives™ on Stack Overflow

AxiosError on POST request is giving ERR_BAD_RESPONSE on my ReactJS Code

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related