Come inviare un'intestazione di autorizzazione con axios

Come posso inviare un'intestazione di autenticazione con un token tramite axios.js? Ho provato alcune cose senza successo, ad esempio:

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

Mi dà questo errore:

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

Sono riuscito a farlo funzionare impostando l'impostazione predefinita globale, ma immagino che questa non sia l'idea migliore per una singola richiesta:

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

Aggiornare :

La risposta di Cole mi ha aiutato a trovare il problema. Sto usando il middleware django-cors-headers che gestisce già l'intestazione di autorizzazione per impostazione predefinita.

Ma sono riuscito a capire il messaggio di errore e ho corretto un errore nel mio codice di richiesta axios, che dovrebbe assomigliare a questo

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

Su richieste http non semplici il tuo browser invierà una richiesta di "verifica preliminare" (una richiesta del metodo OPTIONS) per determinare quali informazioni il sito in questione considera sicure da inviare (vedi qui per le specifiche della politica cross-origin su questo). Una delle intestazioni rilevanti che l'host può impostare in una risposta di verifica preliminare è Access-Control-Allow-Headers. Se una qualsiasi delle intestazioni che desideri inviare non era elencata né nell'elenco delle specifiche delle intestazioni autorizzate né nella risposta di verifica preliminare del server, il browser rifiuterà di inviare la tua richiesta.

Nel tuo caso, stai tentando di inviare Authorizationun'intestazione, che non è considerata una delle intestazioni universalmente sicure per inviare intestazioni. Il browser invia quindi una richiesta di verifica preliminare per chiedere al server se deve inviare tale intestazione. Il server sta inviando Access-Control-Allow-Headersun'intestazione vuota (che si ritiene significhi "non consentire intestazioni aggiuntive") o sta inviando un'intestazione che non include Authorizationnel suo elenco di intestazioni consentite. Per questo motivo, il browser non invierà la tua richiesta e sceglie invece di inviarti una notifica generando un errore.

Qualsiasi soluzione Javascript che trovi che ti consenta di inviare questa richiesta in ogni caso dovrebbe essere considerata un bug in quanto è contro la politica di richiesta cross origin che il tuo browser sta cercando di applicare per la tua sicurezza.

tl; dr - Se desideri inviareAuthorizationintestazioni, è meglio che il tuo server sia configurato per consentirlo. Imposta il tuo server in modo che risponda a unaOPTIONSrichiesta a quell'URL conAccess-Control-Allow-Headers: Authorizationun'intestazione.

Prova questo :

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

Questo ha funzionato per me:

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

Invece di aggiungerlo a ogni richiesta, puoi semplicemente aggiungerlo come configurazione predefinita in questo modo.

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

Hai quasi ragione, regola il tuo codice in questo modo

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

nota dove metto i backtick, ho aggiunto '' dopo Bearer, puoi omettere se sarai sicuro di gestire sul lato server

Invece di chiamare la funzione axios.get Usa:

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: devi aggiungere OPZIONI e Autorizzazione a setHeader ()

questa modifica ha risolto il mio problema, provaci!

Installa il corsmiddleware. Stavamo cercando di risolverlo con il nostro codice, ma tutti i tentativi sono falliti miseramente.

Questo lo ha fatto funzionare:

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

Link originale

Puoi provare questo.

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