I am using JS axios. I do not understand this error. error:

Error: Request failed with status code 422
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)

This is my code:

const config = {
        headers: { Authorization: `Bearer ${localStorage.getItem('id_token')}`,
        headers: {
            // Overwrite Axios's automatically set Content-Type
            'Content-Type': 'application/json'
          }
     }
    };
    
    const bodyParameters = {
        password:values.newPassword
    };
    
    
    setIsLoading(true)

    //localhost:5000/api/v1/user/updatepassword

    Axios.post('http://127.0.0.1:5000/api/v1/user/updatepassword', 
    bodyParameters,
    config
       
    )

And I am testing with fetch in chrome console. and got this error:

SyntaxError: Unexpected Identifier

I am using JS axios. I do not understand this error. error:

Error: Request failed with status code 422
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)

This is my code:

const config = {
        headers: { Authorization: `Bearer ${localStorage.getItem('id_token')}`,
        headers: {
            // Overwrite Axios's automatically set Content-Type
            'Content-Type': 'application/json'
          }
     }
    };
    
    const bodyParameters = {
        password:values.newPassword
    };
    
    
    setIsLoading(true)

    //localhost:5000/api/v1/user/updatepassword

    Axios.post('http://127.0.0.1:5000/api/v1/user/updatepassword', 
    bodyParameters,
    config
       
    )

And I am testing with fetch in chrome console. and got this error:

SyntaxError: Unexpected Identifier

• javascript
• reactjs

• I think this problem is from your backend. – kyun Commented Dec 22, 2020 at 7:40
• 2 422 is usually about validation problems. are you sure your backend is working as you expect it to work? did you try that on postman or curl?? – HSLM Commented Dec 22, 2020 at 7:40
• JavaScript objects cannot have repeated keys. Merge your two headers entries – Phil Commented Jul 23, 2023 at 23:15

2 Answers 2

I think your error is use 2 headers in config object. You can write it like this:

const config = {
        headers: { 
             Authorization: `Bearer ${localStorage.getItem('id_token')}`,
             'Content-Type': 'application/json'
        }
}

422 status code means that your backend understands your request, but can't process the body (data) you sent.

You can try:

const config = {
  method: 'post',
  url: 'http://127.0.0.1:5000/api/v1/user/updatepassword',
  headers: { 
             Authorization: `Bearer ${localStorage.getItem('id_token')}`,
             'Content-Type': 'application/json'
           },
  body: {
          password:values.newPassword
        }
}
axios(config).then(response => console.log(response)).catch(err => console.error(err))

If you get the same error, check your backend gets all the fields it needs.

One more thing you can do: Try making the request on Postman and when it works you can get the axios code for it directly in the code section.