Meneruskan header dengan permintaan POST axios

Saya telah menulis permintaan POST axios seperti yang direkomendasikan dari dokumentasi paket npm seperti:

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

Dan berhasil, tapi sekarang saya telah memodifikasi API backend saya untuk menerima header.

Jenis Konten: 'application / json'

Otorisasi: 'JWT fefege ...'

Sekarang, permintaan ini berfungsi dengan baik di Postman, tetapi ketika menulis panggilan axios, saya mengikuti tautan ini dan tidak bisa membuatnya berfungsi.

Saya terus menerus mendapatkan 400 BAD Requestkesalahan.

Ini permintaan saya yang telah diubah:

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

Bantuan apa pun sangat dihargai.

Saat menggunakan axios, untuk meneruskan header kustom, berikan objek yang berisi header sebagai argumen terakhir

Ubah permintaan axios Anda seperti:

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

Berikut adalah contoh lengkap permintaan axios.post dengan header kustom

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

Ini mungkin bisa membantu,

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

Jawaban Shubham tidak berhasil untukku.

Saat Anda menggunakan pustaka axios dan meneruskan tajuk khusus, Anda perlu membuat tajuk sebagai objek dengan nama kunci "tajuk". Kunci tajuk harus berisi objek, ini adalah Jenis Konten dan Otorisasi.

Contoh di bawah ini berfungsi dengan baik.

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

Anda juga dapat menggunakan interseptor untuk meneruskan header

Ini dapat menghemat banyak kode

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

Atau, jika Anda menggunakan beberapa properti dari prototipe vuejs yang tidak dapat dibaca saat pembuatan, Anda juga dapat menentukan header dan menulis ie

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 harus diformat dengan tanda kutip ganda

Suka:

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

Tidak hanya:

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