reactjs - type - Pasar encabezados con axios solicitud POST

axios post login

Question

He escrito una solicitud POST de axios como se recomienda en la documentación del paquete npm como:

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

Y funciona, pero ahora he modificado mi API de back-end para aceptar encabezados.

Tipo de contenido: ''application / json''

Autorización: ''JWT fefege ...''

Ahora, esta solicitud funciona bien en Postman, pero cuando escribo una llamada axios, sigo este enlace y no puedo hacer que funcione.

Constantemente recibo un error de 400 BAD Request .

Aquí está mi solicitud modificada:

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

Cualquier ayuda es muy apreciada.

Answer 1

Aquí hay un ejemplo completo de una solicitud axios.post con encabezados personalizados

var postData = {
email: "[email protected]",
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);
})

Answer 2

Cuando utilice axios, para pasar encabezados personalizados, proporcione un objeto que contenga los encabezados como último argumento

Modifique su solicitud de axios como:

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

Answer 3

Json tiene que formatearse con comillas dobles

Me gusta:

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

No solo:

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

Answer 4

La respuesta de Shubham no funcionó para mí.

Cuando utiliza la biblioteca axios y pasa encabezados personalizados, necesita construir encabezados como un objeto con el nombre clave "encabezados". La clave de encabezado debe contener un objeto, aquí está Content-Type y Authorization.

El siguiente ejemplo está funcionando bien.

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

Answer 5

O, si está utilizando alguna propiedad del prototipo vuejs que no se puede leer en la creación, también puede definir encabezados y escribir, es decir

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