phần đầu Đi qua với yêu cầu Axios POST [ReactJS]

Question

Tôi đã viết một yêu cầu Axios POST theo khuyến cáo từ các tài liệu hướng dẫn gói NPM như

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

Và nó hoạt động, nhưng bây giờ tôi đã sửa đổi API backend của tôi để chấp nhận Headers

Content-type: 'application/json'

Authorization: 'JWT fefege ...'

Hiện tại, yêu cầu này hoạt động tốt trên POSTMAN, nhưng khi viết cuộc gọi qua trục, tôi thực hiện theo this link và không thể làm cho nó hoạt động.

Tôi contantly nhận 400 BAD Request error

Dưới đây là yêu cầu sửa đổi của tôi

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 appreciated rất

Cảm ơn trước.

Answer 1

Khi sử dụng Axios, để thông qua tiêu đề tùy chỉnh, cung cấp một đối tượng có chứa các tiêu đề như là đối số cuối cùng

Sửa Axios của bạn yêu cầu như

 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

Dưới đây là một ví dụ đầy đủ của một Axios. yêu cầu bài với tiêu đề tùy chỉnh

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