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    gt        dispatch  type  FOUND USER  data  response data 0        catch  error    gt        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    gt        dispatch  type  FOUND USER  data  response data 0        catch  error    gt        dispatch  type  ERROR FINDING USER        Any help is greatly appreciated

User · Answer

We can pass headers as arguments    onClickHandler        gt        const data   new FormData        for var x   0  x lt this state selectedFile length  x            data append  file   this state selectedFile x              const options           headers               Content-Type    application json                           axios post  quot http   localhost 8000 upload quot   data  options          onUploadProgress  ProgressEvent   gt            this setState             loaded   ProgressEvent loaded   ProgressEvent total 100                                     then res   gt       then print response status         console log  upload success                   catch err   gt       then print response status         console log  upload fail with error    err

User · Answer

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  amp  amp   Bearer    token                then  response    gt        dispatch  type  FOUND USER  data  response data 0        catch  error    gt        dispatch  type  ERROR FINDING USER

User · Answer

Here is a full example of an axios post request with custom headers   x000D   x000D  var postData     x000D    email   test test com   x000D    password   password  x000D     x000D   x000D  let axiosConfig     x000D    headers    x000D         Content-Type    application json charset UTF-8   x000D         Access-Control-Allow-Origin        x000D      x000D     x000D   x000D  axios post  http    lt host gt   lt port gt   lt path gt    postData  axiosConfig  x000D   then  res    gt    x000D    console log  RESPONSE RECEIVED     res   x000D     x000D   catch  err    gt    x000D    console log  AXIOS ERROR     err   x000D     x000D   x000D   x000D

User · Answer

You can also use interceptors to pass the headers  It can save you a lot of code  axios interceptors request use config   gt      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

User · Answer

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    gt                dispatch  type  FOUND USER  data  response data 0                        catch  error    gt                dispatch  type  ERROR FINDING USER

User · Answer

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    gt        dispatch         type  FOUND USER        data  response data 0                 catch  error    gt        dispatch         type  ERROR FINDING USER

User · Answer

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      gt      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      gt                         Swal fire  Neuspje  no     Ne  to je po  lo do davola    warning

User · Answer

This might be helpful    x000D   x000D  const data     x000D    email   me me com   x000D    username   me  x000D     x000D   x000D  const options     x000D    headers    x000D         Content-Type    application json   x000D      x000D     x000D   x000D  axios post  http   path   data  options  x000D    then  res    gt    x000D     console log  RESPONSE           res   x000D      x000D    catch  err    gt    x000D     console log  ERROR         err   x000D      x000D   x000D   x000D   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

User · Answer

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

User · Answer

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

[json] Passing headers with axios POST request

Examples related to json

Examples related to http-headers

Examples related to http-post

Examples related to axios

Examples related to content-type