So senden Sie einen Autorisierungsheader mit Axios

95

Wie kann ich einen Authentifizierungsheader mit einem Token über axios.js senden? Ich habe ein paar Dinge ohne Erfolg ausprobiert, zum Beispiel:

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

Gibt mir diesen Fehler:

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

Ich habe es geschafft, es durch Festlegen eines globalen Standards zum Laufen zu bringen, aber ich vermute, dass dies nicht die beste Idee für eine einzelne Anfrage ist:

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

Update:

Coles Antwort half mir, das Problem zu finden. Ich verwende die Middleware django-cors-headers, die standardmäßig bereits den Autorisierungsheader verarbeitet.

Aber ich konnte die Fehlermeldung verstehen und einen Fehler in meinem Axios-Anforderungscode beheben, der so aussehen sollte

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

Antworten:

85

Bei nicht einfachen http-Anforderungen sendet Ihr Browser zuerst eine "Preflight" -Anforderung (eine OPTIONS-Methodenanforderung), um zu bestimmen, was die betreffende Site als sicher ansieht, um Informationen zu senden (siehe hier für die Ursprungsrichtlinienspezifikation dazu). Einer der relevanten Header, die der Host in einer Preflight-Antwort festlegen kann, ist Access-Control-Allow-Headers. Wenn einer der Header, die Sie senden möchten, weder in der Liste der auf der Whitelist aufgeführten Header der Spezifikation noch in der Preflight-Antwort des Servers aufgeführt ist, lehnt der Browser das Senden Ihrer Anfrage ab.

In Ihrem Fall versuchen Sie, einen AuthorizationHeader zu senden , der nicht als einer der universell sichersten zum Senden von Headern angesehen wird. Der Browser sendet dann eine Preflight-Anfrage, um den Server zu fragen, ob er diesen Header senden soll. Der Server sendet entweder einen leeren Access-Control-Allow-HeadersHeader (was bedeutet, dass keine zusätzlichen Header zulässig sind) oder einen Header, der keine enthältAuthorization zulässig in der Liste der zulässigen Header enthalten ist. Aus diesem Grund sendet der Browser Ihre Anfrage nicht und benachrichtigt Sie stattdessen durch Auslösen eines Fehlers.

Jede Javascript-Problemumgehung, mit der Sie diese Anfrage trotzdem senden können, sollte als Fehler angesehen werden, da sie gegen die Cross-Origin-Anforderungsrichtlinie verstößt, die Ihr Browser zu Ihrer eigenen Sicherheit durchzusetzen versucht.

tl; dr - Wenn SieAuthorizationHeadersendenmöchten, sollte Ihr Server besser so konfiguriert sein, dass er dies zulässt. Richten Sie Ihren Server so ein, dass er auf eineOPTIONSAnfrage unter dieser URL mit einemAccess-Control-Allow-Headers: AuthorizationHeaderreagiert.

Cole Erickson
quelle
11
Danke, Cole! Ihre Antwort hat mir geholfen, das Problem zu finden. Ich verwende die Middleware django-cors-headers, die standardmäßig bereits den Autorisierungsheader verarbeitet. Aber ich konnte die Fehlermeldung verstehen und einen Fehler in meinem Axios-Anforderungscode beheben, der so aussehen sollte return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
foobar
1
Bitte! Ich habe ständig Probleme mit meinen APIs. Ich bin nur froh, dass ich Ihnen helfen konnte, den Prozess zu verstehen, den es durchlaufen muss.
Cole Erickson
43

Versuche dies :

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );
Matija Župančić
quelle
1
Der Headername lautet also "Access-Control-Allow-Headers" und der Wert ist genau das, was Sie wollen.
Matija Župančić
Du meinst also, ich hätte so etwas wie: axios.get (url, {headers: {'Access-Control-Allow-Headers': 'Bearer <mein Token>'}})? Das geht nicht
Foobar
11
Ich glaube, es sollte {'Authorization': 'Bearer <my token>'} sein
John Harding
35

Das hat bei mir funktioniert:

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });
sean717
quelle
Die Antwort enthält weniger Details als die oben genannten, aber dies ist die Antwort, nach der jeder sucht, wenn er bei Google sucht.
Black Mamba
31

Anstatt es zu jeder Anfrage hinzuzufügen, können Sie es einfach als Standardkonfiguration hinzufügen.

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}` 
Kanaan Etai
quelle
Wie platzieren Sie diese Konfiguration? im Stammverzeichnis (index.js, App.js)? Oder in einer separaten Datei?
Ibubi
8

Sie sind fast richtig, passen Sie einfach Ihren Code auf diese Weise an

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

Beachten Sie, wo ich die Backticks platziere. Ich habe '' nach Bearer hinzugefügt. Sie können darauf verzichten, wenn Sie sicher sind, dass Sie auf der Serverseite damit umgehen

Jalasem
quelle
6
Normalerweise (zwischen Spezifikation) befindet sich -zwischen dem Authentifizierungsschema und dem Token ein Leerzeichen und kein Bindestrich ( ). Ich habe noch nie gesehen, dass ein Servertyp einen Strich erfordert, wie Sie gezeigt haben, und die meisten, wenn nicht alle, würden einen Fehler zurücksenden, wenn einer bereitgestellt würde.
Raman
6

Anstatt die Funktion axios.get aufzurufen, verwenden Sie:

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })
Deepak
quelle
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: Sie müssen OPTIONS & Authorization zum setHeader () hinzufügen.

Diese Änderung hat mein Problem behoben, probieren Sie es einfach aus!

MESDOUR
quelle
0

Installieren Sie die corsMiddleware. Wir haben versucht, es mit unserem eigenen Code zu lösen, aber alle Versuche sind kläglich gescheitert.

Damit hat es funktioniert:

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

Ursprünglicher Link

Klingel
quelle
Dies ist für Knotenserver, nicht für Axios
Marc Garcia
Benutzer, die diese Frage finden, können diese Antwort nützlich finden. Diese Frage kann für die Arbeit mit Knotenservern in Anwendungsfällen verwendet werden und als Erinnerung daran dienen, dass Cors ihr Problem lösen können, oder um die Überprüfung des Backend-Headers unter den obigen Code zu verschieben. Hat mir so viel Frust erspart, danke Klingeln.
DORRITO
0

Sie können dies versuchen.

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