So senden Sie einen Autorisierungsheader mit Axios

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

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.

Versuche dies :

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

Das hat bei mir funktioniert:

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

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

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

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

Anstatt die Funktion axios.get aufzurufen, verwenden Sie:

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: Sie müssen OPTIONS & Authorization zum setHeader () hinzufügen.

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

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

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