Passing headers with axios POST request

Question

I have written an 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 an axios call, I follow this link and can't quite get it to work.

I am constantly 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})
})

Solution 1

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

Modify your Axios request like:

const 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
    })
  })

Solution 2

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

var postData = {
  email: "[email protected]",
  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);
})

Solution 3

To set headers in an Axios POST request, pass the third object to the axios.post() call.

const token = '..your token..'

axios.post(url, {
  //...data
}, {
  headers: {
    'Authorization': `Basic ${token}` 
  }
})

To set headers in an Axios GET request, pass a second object to the axios.get() call.

const token = '..your token..' 

axios.get(url, {
  headers: {
    'Authorization': `Basic ${token}`
  }
})

Solution 4

const data = {
  email: "[email protected]",
  username: "me"
};

const options = {
  headers: {
      'Content-Type': 'application/json',
  }
};

axios.post('http://path', data, options)
 .then((res) => {
   console.log("RESPONSE ==== : ", res);
 })
 .catch((err) => {
   console.log("ERROR: ====", err);
 })

All status codes above 400 will be caught in the Axios catch block.

Also, headers are optional for the post method in Axios

Solution 5

You can also use interceptors to pass the headers

It can save you a lot of code

axios.interceptors.request.use(config => {
  if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

  const accessToken = AuthService.getAccessToken();
  if (accessToken) config.headers.Authorization = 'Bearer ' + accessToken;

  return config;
});

View more solutions

Comments

[Shubham Khatri]

@KishoreJethava, 500 is internal server error, can you check on server side if headers are coming or is there some other bug

[Shubham Khatri]

@KishoreJethava, can you just log the headers in your server and see if you are getting the correct values

[Shubham Khatri]

Dont you need to post any data? Also make sure this.state.token contains a value

[Kishore Jethava]

Let us continue this discussion in chat.

[Eswar]

facing this issue for get request. The response is coming in xml format. This doesn't solve the problem.

[Istiaque Ahmed]

@ShubhamKhatri, may I ask you to have a look at an axios related question here : stackoverflow.com/questions/59470085/… ?

[Constantine]

I would suggest to use config.method.toUpperCase()

[Constantine]

Unfortunately, mine was lower

[Dipan Mandal]

What are these dispatch methods used for?

[Shubham Khatri]

@DipanMandal dispatch is used to update the redux store from within actions. A redux-thunk middleware is involved in this syntax too

[Akhil]

for that you need to add headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json" } Please note this only works if your api supports json response

[amitava mozumder]

if i try this then my header is going as [object, object]. plz help!

[PGallagher]

This works for me, but I needed to base 64 encode my auth token with... const encodedAPIKey = Buffer.from(APIKey).toString('base64'); and I also prepended Basic

[Peter Palmer]

My issue was that I had Headers instead of headers. It is case sensitive, keep in mind.

[Alex Bishka]

Thanks for the example, took me a stupid amount of time to figure this out.

[Vishali]

the answer which worked for 467 members is not helping for me.don't know what is the issue.i am also following the above answer in my application.but i am getting auth error.usually the auth error will come for me when header is not available.