javascript - vue - patch axios

Cómo enviar encabezado de autorización con axios

Question

¿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.

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

Answer 1

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

Answer 2

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

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

Answer 3

En solicitudes http no simples, su navegador enviará primero una solicitud de "verificación previa" (una solicitud de método OPTIONS) para determinar qué considera el sitio en cuestión información segura para enviar (consulte here las especificaciones de 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 especificaciones de encabezados incluidos en la lista blanca 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. El navegador luego envía una solicitud de verificación previa para preguntarle al servidor si debe enviar ese encabezado. El servidor está enviando un Access-Control-Allow-Headers vacío Access-Control-Allow-Headers (que se considera que significa "no permitir encabezados adicionales") o está enviando un encabezado que no incluye Authorization en su lista de encabezados permitidos. Debido a esto, el navegador no enviará su solicitud y, en su lugar, elige notificarlo lanzando 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 hacer cumplir 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 .

Answer 4

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

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

observe dónde coloco los backticks, agregué ''-'' después de Bearer, puede omitir si se asegurará de manejar en el lado del servidor

Answer 5

Esto me ha funcionado:

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

Answer 6

Prueba esto :

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

Answer 7

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, ¡solo inténtalo!