Uboczny nagłówki z żądania Axios POST [ReactJS]

Question

Pisałem Request Axios POST zgodnie z zaleceniami z dokumentacji pakietu npm jak

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

I to działa, ale teraz zostały zmodyfikowane mój backend API, aby zaakceptować nagłówki

Content-Type: 'application/json'

odpowiedzialny: 'JWT fefege ...'

Teraz to żądanie działa poprawnie na POSTMAN, ale pisząc wywołanie axios, podążam za this link i nie mogę go uruchomić.

ja contantly coraz 400 BAD Request error

Oto mój zmodyfikowany Zapytanie

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

Każda pomoc jest mile widziana

Z góry dzięki.

Answer 1

Podczas korzystania Axios, aby przekazać niestandardowe nagłówki, dostarczamy obiekt zawierający nagłówki jako ostatni argument

zmodyfikować Axios zażądać jak

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

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

Answer 2

Oto pełna przykładem Axios. post żądanie z nagłówkami niestandardowych

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