Axios POST isteği ile geçiş başlıkları

Aşağıdakiler gibi npm paketi belgelerinden önerildiği gibi bir axios POST isteği yazdım:

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

Ve çalışıyor, ancak şimdi arka uç API'mi başlıkları kabul edecek şekilde değiştirdim.

İçerik Türü: 'uygulama / json'

Yetki: 'JWT fefege ...'

Şimdi, bu istek Postacı'da iyi çalışıyor, ancak bir axios çağrısı yazarken, bu bağlantıyı izliyorum ve tam olarak çalışmasını sağlayamıyorum.

Sürekli 400 BAD Requesthata alıyorum.

İşte benim değiştirilmiş isteğim:

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

Herhangi bir yardım çok takdir edilmektedir.

Aksiyoları kullanırken, özel başlıkları iletmek için, son argüman olarak başlıkları içeren bir nesne sağlayın

Aksiyo isteğinizi şu şekilde değiştirin:

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

İşte özel başlıklara sahip bir axios.post isteğinin tam bir örneği

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

Bu yardımcı olabilir,

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 cevabı benim için işe yaramadı.

Axios kitaplığını kullanırken ve özel başlıkları iletmek için, başlıkları "başlık" anahtar adıyla bir nesne olarak oluşturmanız gerekir. Başlıklar anahtarı bir nesne içermelidir, burada İçerik Türü ve Yetkilendirme yer alır.

Aşağıdaki örnek iyi çalışıyor.

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

Başlıkları geçmek için durdurucuları da kullanabilirsiniz

Size çok fazla kod kazandırabilir

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

Veya, vuejs prototipinden oluştururken okunamayan bir özellik kullanıyorsanız, ayrıca başlıkları tanımlayabilir ve ie yazabilirsiniz.

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, çift tırnak ile biçimlendirilmelidir

Sevmek:

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

Sadece:

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