¿Cómo puedo enviar un encabezado de autenticación con un token a través de axios.js? He intentado algunas cosas sin éxito, por ejemplo:
const header = `Authorization: Bearer ${token}`; return axios.get(URLConstants.USER_URL, { headers: { header } });me da este error:
XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.Me las arreglé para que funcione configurando el valor predeterminado global, pero supongo que esta no es la mejor idea para una sola solicitud:
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;Actualizar :
La respuesta de Cole me ayudó a encontrar el problema. Estoy usando el middleware django-cors-headers que ya maneja el encabezado de autorización de forma predeterminada.
Pero pude entender el mensaje de error y solucioné un error en mi código de solicitud de axios, que debería verse así
return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });En las solicitudes http no simples, su navegador enviará primero una solicitud de "verificación previa" (una solicitud de método de OPCIONES) para determinar qué información considera segura el sitio en cuestión para enviar (consulte aquí las especificaciones de la política de origen cruzado al respecto). Uno de los encabezados relevantes que el host puede establecer en una respuesta de verificación previa es Access-Control-Allow-Headers . Si alguno de los encabezados que desea enviar no figura en la lista de encabezados incluidos en la lista blanca de la especificación o en la respuesta de verificación previa del servidor, el navegador se negará a enviar su solicitud.
En su caso, está intentando enviar un encabezado de Authorization , que no se considera uno de los encabezados universalmente seguros para enviar. Luego, el navegador envía una solicitud de verificación previa para preguntarle al servidor si debe enviar ese encabezado. El servidor envía un Access-Control-Allow-Headers vacío (que se considera que significa "no permitir encabezados adicionales") o envía un encabezado que no incluye Authorization en su lista de encabezados permitidos. Debido a esto, el navegador no va a enviar su solicitud y, en su lugar, elige notificarle arrojando un error.
Cualquier solución de Javascript que encuentre que le permita enviar esta solicitud de todos modos debe considerarse un error, ya que va en contra de la política de solicitud de origen cruzado que su navegador está tratando de aplicar por su propia seguridad.
tl; dr : si desea enviar encabezados de Authorization , es mejor que su servidor esté configurado para permitirlo. Configure su servidor para que responda a una solicitud de OPTIONS en esa URL con un Access-Control-Allow-Headers: Authorization .
Esto ha funcionado para mí:
let webApiUrl = 'example.com/getStuff'; let tokenStr = 'xxyyzz'; axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });En lugar de agregarlo a cada solicitud, puede agregarlo como una configuración predeterminada de esta manera.
axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`