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