Truyền tiêu đề với axios POST yêu cầu

Tôi đã viết một yêu cầu POST axios theo khuyến nghị từ tài liệu 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 phụ trợ của mình để chấp nhận các tiêu đề.

Loại nội dung: 'application / json'

Ủy quyền: 'JWT fefege ...'

Bây giờ, yêu cầu này hoạt động tốt trên Postman, nhưng khi viết một cuộc gọi axios, tôi theo liên kết này và hoàn toàn không thể thực hiện được.

Tôi liên tục nhận được 400 BAD Requestlỗ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})
})

Bất kỳ trợ giúp nào cũng được đánh giá rất cao.

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

Sửa đổi yêu cầu axios của bạn như:

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

Dưới đây là một ví dụ đầy đủ về yêu cầu axios.post với các 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);
})

Điều này có thể hữu ích,

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

Blockquote

Blockquote

Shubham trả lời không làm việc cho tôi.

Khi bạn đang sử dụng thư viện axios và để vượt qua các tiêu đề tùy chỉnh, bạn cần xây dựng các tiêu đề như một đối tượng với tên khóa "tiêu đề". Khóa tiêu đề phải chứa một đối tượng, ở đây là Kiểu nội dung và Ủy quyền.

Ví dụ dưới đây đang hoạt động tốt.

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

Bạn cũng có thể sử dụng các thiết bị chặn để vượt qua các tiêu đề

Nó có thể giúp bạn tiết kiệm rất nhiều mã

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

Hoặc, nếu bạn đang sử dụng một số thuộc tính từ nguyên mẫu vuejs không thể đọc được khi tạo, bạn cũng có thể xác định các tiêu đề và viết tức là

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

Json phải được định dạng với dấu ngoặc kép

Giống:

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

Không chỉ:

headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
         }