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

Any help is greatly appreciated.

Why haven't you accepted an answer even though many of them are good? — Safwan Samsudeen, Oct 02 '20 at 08:38

score 343 · Accepted Answer · edited Jul 30 '19 at 07:20

343

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

edited Jul 30 '19 at 07:20

SiddAjmera

32,111
5
45
85

answered Jun 18 '17 at 17:48

Shubham Khatri

211,155
45
305
318

@KishoreJethava, 500 is internal server error, can you check on server side if headers are coming or is there some other bug – Shubham Khatri Sep 25 '17 at 10:31
@KishoreJethava, can you just log the headers in your server and see if you are getting the correct values – Shubham Khatri Sep 25 '17 at 10:44
Dont you need to post any data? Also make sure this.state.token contains a value – Shubham Khatri Sep 25 '17 at 10:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155236/discussion-between-kishore-jethava-and-shubham-khatri). – Kishore Jethava Sep 25 '17 at 10:52
@ShubhamKhatri, may I ask you to have a look at an `axios` related question here : https://stackoverflow.com/questions/59470085/vue-js-validation-fails-for-file-upload-in-axios-when-multipart-form-data-used ? – Istiaque Ahmed Dec 24 '19 at 14:25
What are these dispatch methods used for? – Dipan Mandal Aug 06 '20 at 08:17
@DipanMandal dispatch is used to update the redux store from within actions. A redux-thunk middleware is involved in this syntax too – Shubham Khatri Aug 06 '20 at 10:30
if i try this then my header is going as [object, object]. plz help! – amitava mozumder Mar 10 '21 at 14:40
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` – PGallagher May 20 '21 at 09:29

Matthew Rideout · Answer 2 · 2018-01-27T19:45:45.910

51

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

var postData = {
  email: "test@test.com",
  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);
})

edited Jan 27 '18 at 19:45

answered Jan 27 '18 at 19:23

Matthew Rideout

4,311
1
24
46

facing this issue for get request. The response is coming in xml format. This doesn't solve the problem. – Eswar Feb 05 '19 at 13:37
1

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 – Akhil Oct 08 '20 at 12:02

score 18 · Answer 3 · answered Oct 22 '20 at 11:35

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

Cheers!! Read Simple Write Simple

score 7 · Answer 4 · answered Sep 10 '19 at 07:22

This might be helpful,

const data = {
  email: "me@me.com",
  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);
 })

Note: All status codes above 400 will be caught in the Axios catch block. Also, headers are optional for the post method in Axios

Blockquote

Blockquote

score 4 · Answer 5 · answered Jun 19 '20 at 10:24

4

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

answered Jun 19 '20 at 10:24

Israel kusayev

509
3
11

1

I would suggest to use `config.method.toUpperCase()` – Constantine Jun 24 '20 at 15:56
1

Unfortunately, mine was lower – Constantine Jun 25 '20 at 15:14

score 3 · Answer 6 · answered Jul 25 '18 at 06:40

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

Shubham's answer didn't work for me either, thanks Hemadri! – Safwan Samsudeen Oct 02 '20 at 08:39 — Safwan Samsudeen, Oct 02 '20 at 08:39

score 2 · Answer 7 · answered Oct 02 '20 at 14:54

We can pass headers as arguments,

  onClickHandler = () => {
    const data = new FormData() 
    for(var x = 0; x<this.state.selectedFile.length; x++) {
      data.append('file', this.state.selectedFile[x])
    }

    const options = {
      headers: {
          'Content-Type': 'application/json',
      }
    };
    
    axios.post("http://localhost:8000/upload", data, options, {
      onUploadProgress: ProgressEvent => {
        this.setState({
          loaded: (ProgressEvent.loaded / ProgressEvent.total*100),
        })
      },
    })
      .then(res => { // then print response status
        console.log('upload success')
      })
      .catch(err => { // then print response status
        console.log('upload fail with error: ',err)
      })
    }

score 1 · Answer 8 · answered Dec 04 '20 at 08:20

axios.post can recieve accept 3 arguments that last argument can accept a config object that you can set header

Sample code with your question:

var data = {
'key1': 'val1',
'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data, {
        headers: {Authorization: token && `Bearer ${ token }`}
})       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

score 0 · Answer 9 · answered Jul 11 '19 at 13:17

Or, if you are using some property from vuejs prototype that can't be read on creation you can also define headers and write i.e.

storePropertyMaxSpeed(){
                axios.post('api/property', {
                    "property_name" : 'max_speed',
                    "property_amount" : this.newPropertyMaxSpeed
                    },
                    {headers :  {'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + this.$gate.token()}})
                  .then(() => { //this below peace of code isn't important 
                    Event.$emit('dbPropertyChanged');

                    $('#addPropertyMaxSpeedModal').modal('hide');

                    Swal.fire({
                        position: 'center',
                        type: 'success',
                        title: 'Nova brzina unešena u bazu',
                        showConfirmButton: false,
                        timer: 1500
                        })
                })
                .catch(() => {
                     Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
                })
            }
        },

score 0 · Answer 10 · answered Nov 20 '20 at 20:19

Interceptors

I had the same issue and the reason was that I hadn't returned the response in the interceptor. Javascript thought, rightfully so, that I wanted to return undefined for the promise:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

Passing headers with axios POST request

10 Answers10

Linked

Related