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

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

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.

Prueba esto :

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

Esto me ha funcionado:

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 así.

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

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

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

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

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

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!

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