Como enviar cabeçalho de autorização com axios

Como posso enviar um cabeçalho de autenticação com um token via axios.js? Tentei algumas coisas sem sucesso, por exemplo:

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

Me dá este erro:

XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.

Consegui fazer funcionar definindo o padrão global, mas acho que essa não é a melhor ideia para uma única solicitação:

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

Atualização:

A resposta de Cole me ajudou a encontrar o problema. Estou usando o middleware django-cors-headers que já gerencia o cabeçalho de autorização por padrão.

Mas eu fui capaz de entender a mensagem de erro e corrigi um erro no meu código de solicitação do axios, que deve ser parecido com este

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

Em solicitações http não simples, seu navegador enviará uma solicitação de "comprovação" (uma solicitação do método OPTIONS) primeiro para determinar o que o site em questão considera informações seguras para enviar (veja aqui as especificações de política de origem cruzada sobre isso). Um dos cabeçalhos relevantes que o host pode definir em uma resposta de comprovação é Access-Control-Allow-Headers. Se algum dos cabeçalhos que você deseja enviar não estiver listado na lista de cabeçalhos da lista de permissões ou na resposta de comprovação do servidor, o navegador se recusará a enviar sua solicitação.

No seu caso, você está tentando enviar um Authorizationcabeçalho, o que não é considerado universalmente seguro para enviar cabeçalhos. O navegador então envia uma solicitação de comprovação para perguntar ao servidor se ele deve enviar esse cabeçalho. O servidor está enviando um Access-Control-Allow-Headerscabeçalho vazio (que significa "não permitir cabeçalhos extras") ou está enviando um cabeçalho que não inclui Authorizationem sua lista de cabeçalhos permitidos. Por causa disso, o navegador não enviará sua solicitação e, em vez disso, opta por notificá-lo emitindo um erro.

Qualquer solução alternativa de Javascript que você encontrar que permita enviar esta solicitação de qualquer maneira deve ser considerada um bug, pois é contra a política de solicitação de origem cruzada que seu navegador está tentando impor para sua própria segurança.

tl; dr - Se você quiser enviarAuthorizationcabeçalhos, é melhor seu servidor estar configurado para permitir isso. Configure seu servidor para que ele responda a umaOPTIONSsolicitação nesse url com umAccess-Control-Allow-Headers: Authorizationcabeçalho.

Experimente isto:

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

Isso tem funcionado para mim:

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

Em vez de adicioná-lo a todas as solicitações, você pode apenas adicioná-lo como uma configuração padrão.

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

Você está quase correto, apenas ajuste seu código desta forma

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

observe onde coloco os crases, adicionei '' após o Bearer, você pode omitir se tiver certeza de manipular no lado do servidor

Em vez de chamar a função axios.get, use:

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

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: você deve adicionar OPÇÕES e autorização ao setHeader ()

esta mudança corrigiu o meu problema, experimente!

Instale o corsmiddleware. Estávamos tentando resolvê-lo com nosso próprio código, mas todas as tentativas falharam terrivelmente.

Isso fez funcionar:

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

Link original

Você pode tentar isso.

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