Cómo enviar un encabezado de autorización con axios


99

¿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 estableciendo el valor predeterminado global, pero supongo que esta no es la mejor idea para una sola solicitud:

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Actualización:

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

Respuestas:


89

En solicitudes http no simples, su navegador enviará una solicitud de "verificación previa" (una solicitud de método OPTIONS) primero para determinar qué información el sitio en cuestión considera segura para enviar (consulte aquí la especificación de la política de origen cruzado sobre esto). Uno de los encabezados relevantes que el anfitrión puede establecer en una respuesta previa al vuelo es Access-Control-Allow-Headers. Si alguno de los encabezados que desea enviar no figura en la lista de encabezados de la lista blanca de la especificación o en la respuesta previa al vuelo del servidor, el navegador se negará a enviar su solicitud.

En su caso, está intentando enviar un Authorizationencabezado, que no se considera uno de los encabezados universalmente seguros. Luego, el navegador envía una solicitud de verificación previa para preguntar al servidor si debe enviar ese encabezado. El servidor está enviando un Access-Control-Allow-Headersencabezado vacío (que se considera que significa "no permitir ningún encabezado adicional") o está enviando un encabezado que no se incluye Authorizationen su lista de encabezados permitidos. Debido a esto, el navegador no enviará su solicitud y en su lugar optará por notificarle arrojando un error.

Cualquier solución alternativa de Javascript 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 hacer cumplir por su propia seguridad.

tl; dr : si desea enviarAuthorizationencabezados, es mejor que su servidor esté configurado para permitirlo. Configure su servidor para que responda a unaOPTIONSsolicitud en esa URL con unAccess-Control-Allow-Headers: Authorizationencabezado.


11
¡Gracias, Cole! Tu respuesta 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}` } });
foobar

1
¡De nada! Me encuentro con este tipo de problemas con mis API todo el tiempo. Me alegro de poder ayudarlo a comprender el proceso por el que debe pasar.
Cole Erickson

44

Prueba esto :

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

1
Entonces, el nombre del encabezado será 'Access-Control-Allow-Headers' y el valor es lo que desea.
Matija Župančić

Entonces, ¿quiere decir que tendría algo como: axios.get (url, {headers: {'Access-Control-Allow-Headers': 'Bearer <my token>'}})? Eso no funciona.
foobar

11
Creo que debería ser {'Authorization': 'Bearer <my token>'}
John Harding

38

Esto me ha funcionado:

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });

2
Hay menos detalles en la respuesta en comparación con lo anterior, pero esta es la respuesta que todos buscan cuando buscan en Google.
Black Mamba

33

En lugar de agregarlo a cada solicitud, puede agregarlo como una configuración predeterminada así.

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}` 

¿Cómo coloca esta configuración? en la raíz (index.js, App.js)? ¿O en un archivo separado?
ibubi

8

Estás casi en lo correcto, solo ajusta tu código de esta manera

const headers = { Authorization: `Bearer ${token}` };
return axios.get(URLConstants.USER_URL, { headers });

observe dónde coloco las comillas invertidas, agregué '' después de Bearer, puede omitir si se asegura de manejar en el lado del servidor


6
Normalmente (por especificación) hay un espacio, no un guión ( -), entre el esquema de autenticación y el token. Nunca he visto ningún tipo de servidor que requiera un guión como ha mostrado, y la mayoría, si no todos, enviarían un error si se proporciona uno.
Raman

6

En lugar de llamar a la función axios.get, use:

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })

1

Puedes probar esto.

axios.get(
    url,
    {headers: {
            "Access-Control-Allow-Origin" : "*",
            "Content-type": "Application/json",
            "Authorization": `Bearer ${your-token}`
            }   
        }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

0
res.setHeader('Access-Control-Allow-Headers',
            'Access-Control-Allow-Headers, Origin,OPTIONS,Accept,Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');

Blockquote: debe agregar OPCIONES y autorización al setHeader ()

este cambio ha solucionado mi problema, ¡inténtalo!


0

Instala el cors middleware. Intentábamos resolverlo con nuestro propio código, pero todos los intentos fallaron estrepitosamente.

Esto lo hizo funcionar:

cors = require('cors')
app.use(cors());

Enlace original


1
esto es para servidores de nodo, no para axios
Marc García

Los usuarios que encuentren esta pregunta pueden encontrar esta respuesta útil. Esta pregunta se puede usar para trabajar con servidores de nodos en casos de uso y ser un recordatorio de que los cors pueden resolver su problema, o para mover su verificación de encabezado de backend debajo del código anterior. Ayudó a salvarme de tanta frustración, Gracias sonando la campana.
DORRITO
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.