reactjs - headers - axios send header token

Enviando el token portador con axios.

Question

En mi aplicación de reacción, estoy usando axios para realizar las solicitudes de la API REST.

Pero no puede enviar el encabezado de autorización con la solicitud.

Aquí está mi código:

tokenPayload() {
let config = {
headers: {
''Authorization'': ''Bearer '' + validToken()
}
}
Axios.post(
''http://localhost:8000/api/v1/get_token_payloads'',
config
)
.then( ( response ) => {
console.log( response )
} )
.catch()
}

Aquí, el método validToken() simplemente devolvería el token del almacenamiento del navegador.

Todas las solicitudes tienen una respuesta de error 500 que dice que

El token no se pudo analizar de la solicitud

desde el back-end.

¿Cómo enviar el encabezado de autorización con cada solicitud? ¿Recomendarías algún otro módulo con reaccionar?

Answer 1

El segundo parámetro de axios.post es data (no config ). config es el tercer parámetro. Por favor vea esto para más detalles: https://github.com/mzabriskie/axios#axiosposturl-data-config

Answer 2

Esta es una forma única de configurar el token de autorización en axios. No es una buena idea establecer la configuración para cada llamada de axios y puede cambiar el token de autorización predeterminado de la siguiente manera:

const axios = require(''axios'');
axios.defaults.baseURL = ''http://localhost:1010/''
axios.defaults.headers.common = {''Authorization'': `bearer ${token}`}

Ahora no necesita establecer la configuración para cada llamada a la API. Ahora el token de autorización está configurado para cada llamada de axios.

Answer 3

Puedes crear config una vez y usarla en todas partes.

const instance = axios.create({
baseURL: ''https://some-domain.com/api/'',
timeout: 1000,
headers: {''Authorization'': ''Bearer ''+token}
});
instance.get(''/path'')
.then(response => {
return response.data;
})

Answer 4

Si desea algunos datos después de pasar el token en el encabezado para que pruebe este código

const api = ''your api'';
const token = JSON.parse(sessionStorage.getItem(''data''));
const token = user.data.id; /*take only token and save in token variable*/
axios.get(api , { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
.catch((error) => {
console.log(error)
});

Answer 5

var config = {
headers: {''Authorization'': "bearer " + token}
};
var bodyParameters = {
key: "value"
}
Axios.post(
''http://localhost:8000/api/v1/get_token_payloads'',
bodyParameters,
config
).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
});

El primer parámetro es la URL.
El segundo es el cuerpo JSON que se enviará a lo largo de su solicitud.
El tercer parámetro son los encabezados (entre otras cosas). Que es JSON también.