How to set header and options in axios

Question

I use Axios to perform an HTTP post like this   import axios from  axios  params     HTTP CONTENT LANGUAGE   self language  headers     header1   value  axios post url  params  headers    Is this correct  Or should I do   axios post url  params  params  headers  headers

User · Answer

You can pass a config object to axios like     axios     method   post     url            params    HTTP CONTENT LANGUAGE   self language     headers    header1   value

User · Answer

This is a simple example of a configuration with headers and responseType   var config       headers     Content-Type    application x-www-form-urlencoded       responseType   blob      axios post  http   YOUR URL   this data  config     then  response    gt      console log response data         Content-Type can be  application x-www-form-urlencoded  or  application json  and it may work also  application json charset utf-8   responseType can be  arraybuffer    blob    document    json    text    stream   In this example  this data is the data you want to send  It can be a value or an Array   If you want to send an object you ll probably have to serialize it

User · Answer

I had to create a fd new FormData   object and use the   append    1  method before sending it through axios to my Django API  otherwise I receive a 400 error  In my backend the profile image is related through a OneToOne relationship to the user model  Therefore it is serialized as a nested object and expects this for the put request to work  All changes to the state within the frontend are done with the this setState method  I believe important part is the handleSubmit method at the end  First my axios put request  export const PutUser  data   gt  dispatch getState   gt                                                                                                                                                                                                                                                                                                                                                                                                                                                  dispatch  type  AUTH USER LOADING                                                                                                                                                                                                         const token getState   auth token                                                                                                                                                                                                                             axios                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          method  put                                                                                                                                                                                                                                                    url  https    lt xyz gt  api account user                                                                                                                                                                                                      data data                                                                                                                                                                                                                                                      headers                                                                                                                                                                                                                                                           Authorization   Token   token  null                                                                                                                                                                                                                              Content-Type    multipart form-data                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       then response  gt                                                                                                                                                                                                                                                   dispatch                                                                                                                                                                                                                                                           type  AUTH USER PUT                                                                                                                                                                                                                                              payload  response data                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     catch err  gt                                                                                                                                                                                                                                                       dispatch                                                                                                                                                                                                                                                           type AUTH USER PUT ERROR                                                                                                                                                                                                                                         payload  err                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  My handleSubmit method needs to create the following json object  where the image attribute gets replaced by the actual user input  user   username  charly   first name  charly   last name  brown   profile   image   imgurl          Here is my handleSumit method inside the component  check append handleSubmit  e   gt                                                                                                                                                                                                                                            e preventDefault                                                                                                                                                                                                                                                                                                                                                                                                                         let fd new FormData                                                                                                                                                                                                                                        fd append  username  this state username                                                                                                                                                                                                                   fd append  first name  this state first name                                                                                                                                                                                                               fd append  last name  this state last name                                                                                                                                                                                                                                                                                                                                                                                                                        if this state image  null  fd append  profile image  this state image  this state image name                                                                                                                                                                                                                                                                                                                                                               this props PutUser fd

User · Answer

I have face this issue in post request  I have changed like this in axios header  It works fine   axios post  http   localhost M-Experience resources GETrends php                   firstName  this name                          headers     Content-Type    application x-www-form-urlencoded

User · Answer

There are several ways to do this    For a single request   let config       headers        header1  value         let data        HTTP CONTENT LANGUAGE   self language    axios post URL  data  config  then       For setting default global config    axios defaults headers post  header1      value     for POST requests axios defaults headers common  header1      value     for all requests  For setting as default on axios instance   let instance   axios create     headers        post              can be common or any other method       header1   value1                  - or after instance has been created instance defaults headers post  header1      value     - or before a request is made    using Interceptors instance interceptors request use config   gt      config headers post  header1      value     return config

User · Answer

try this code   in example code use axios get rest API   in mounted     mounted        var config         headers            x-rapidapi-host    covid-19-coronavirus-statistics p rapidapi com          x-rapidapi-key    5156f83861mshd5c5731412d4c5fp18132ejsn8ae65e661a54                    axios get  https   covid-19-coronavirus-statistics p rapidapi com v1 stats       country Thailand    config       then  response    gt        console log response data             Hope is help

User · Answer

user2950593 Your axios request is correct  You need to allow your custom headers on server side  If you have your api in php then this code will work for you  header  quot Access-Control-Allow-Origin    quot       header  quot Access-Control-Allow-Methods  GET  POST  OPTIONS  HEAD quot    header  quot Access-Control-Allow-Headers  Content-Type  header1 quot     Once you will allow your custom headers on server side  your axios requests will start working fine

User · Answer

Here is the Right way -  x000D   x000D  axios post  url     body  data     x000D      headers    x000D       Content-Type    application json  x000D        x000D      x000D    x000D   x000D   x000D

User · Answer

You can initialize a default header axios defaults headers   axios defaults headers              Content-Type    application json           Authorization   myspecialpassword            axios post  https   myapi com     data   hello world              then response   gt                console log  Response   response data                      catch e   gt                console log  Error     e response data

User · Answer

if you want to do a get request with params and headers    x000D   x000D  var params     x000D    paramName1  paramValue1  x000D    paramName2  paramValue2 x000D    x000D   x000D  var headers     x000D    headerName1  headerValue1  x000D    headerName2  headerValue2 x000D    x000D   x000D   Axios get url   params  headers    then res   gt   x000D    console log res data representation   x000D      x000D   x000D   x000D

User · Answer

You can send a get request with Headers  for authentication with jwt for example     axios get  https   example com getSomething      headers       Authorization   Bearer     token   the token is a variable which holds the token            Also you can send a post request    axios post  https   example com postSomething      email  varEmail    varEmail is a variable which holds the email  password  varPassword        headers        Authorization   Bearer     varToken             My way of doing it is to set a request like this     axios     method   post     you can set what request you want to be   url   https   example com request     data   id  varID     headers        Authorization   Bearer     varToken

User · Answer

You can also selected headers to every axios request     Add a request interceptor axios interceptors request use function  config        config headers Authorization    AUTH TOKEN       return config       Second method axios defaults headers common  Authorization      AUTH TOKEN

User · Answer

x000D   x000D  axios post  url     body  data         headers         Content-Type    application json              x000D   x000D   x000D

[javascript] How to set header and options in axios?

Examples related to javascript

Examples related to post

Examples related to axios