Passing headers with axios POST request [ReactJS]

Question

I have written a axios POST Request as recommended from the npm package documentation like

 var data = {
      'key1': 'val1',
      'key2': 'val2'
 }
 axios.post(Helper.getUserAPI(), data)

            .then((response) => {
                dispatch({type: FOUND_USER, data: response.data[0]})
            })
            .catch((error) => {
                dispatch({type: ERROR_FINDING_USER})
            })

And it works, but now I have modified my backend API to accept Headers

Content-Type: 'application/json'

Authorization: 'JWT fefege...'

Now this request works fine on POSTMAN, but when writing a axios call, I follow this link and can't quite get it to work.

I am contantly getting 400 BAD Request error

Here is my modified Request

  axios.post(Helper.getUserAPI(), {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'JWT fefege...'
                },
                data
            })

            .then((response) => {
                dispatch({type: FOUND_USER, data: response.data[0]})
            })
            .catch((error) => {
                dispatch({type: ERROR_FINDING_USER})
            })

Any help is greatly Appreciated

Thanks in advance.

Answer 1

Json has to be formatted with double quotes

Like:

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

Not just:

headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
         }

Answer 2

Shubham answer didn't work for me.

When you are using axios library and to pass custom headers, you need to construct headers as an object with key name "headers". The headers key should contain an object, here it is Content-Type and Authorization.

Below example is working fine.

    var headers = {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...' 
    }
    axios.post(Helper.getUserAPI(), data, {"headers" : headers})

        .then((response) => {
            dispatch({type: FOUND_USER, data: response.data[0]})
        })
        .catch((error) => {
            dispatch({type: ERROR_FINDING_USER})
        })

Answer 3

Here is a full example of an axios.post request with custom headers

var postData = {
  email: "[e-mail]",
  password: "password"
};

let axiosConfig = {
  headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      "Access-Control-Allow-Origin": "*",
  }
};

axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
.then((res) => {
  console.log("RESPONSE RECEIVED: ", res);
})
.catch((err) => {
  console.log("AXIOS ERROR: ", err);
})

Answer 4

When using axios, in order to pass custom headers, supply an object containing the headers as the last argument

Modify your axios request like

        var headers = {
            'Content-Type': 'application/json',
            'Authorization': 'JWT fefege...' 
        }
        axios.post(Helper.getUserAPI(), data, {headers: headers})

            .then((response) => {
                dispatch({type: FOUND_USER, data: response.data[0]})
            })
            .catch((error) => {
                dispatch({type: ERROR_FINDING_USER})
            })