2017-07-26 4 views
1

Ich habe versucht, Axios Anfrage mit vue.js zu senden und es funktionierte gut, wenn keine Header gesendet werden musste. Als es jedoch erforderlich war, eine Autorisierungs-JWT zu senden, erhalte ich einen CORS-Fehler: "Die Antwort auf die Preflight-Anfrage übergibt die Zugriffskontrollprüfung nicht: Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden." Ich weiß nicht, warum dieses Problem auftritt, da Access-Control-Allow-Origin: '*' Header in der Antwort ist. Mein Code ist folgende:Senden Axios erhalten Anfrage mit Autorisierung Header

axios.get(url, { 
    headers: { 
    'Authorization': 'Bearer TOKEN' 
    } 
}) 
.then(function (response) { 
    console.log(response.data) 
}) 

Das Seltsamste ist, wenn ich querystring.stringify oder JSON.stringify auf dem Kopf, ich habe nicht den Fehler 403 (verboten), sondern nur einen Fehler 401 - nicht autorisiert . Ich habe versucht mit Variable und mit dem Token selbst und es hat nicht funktioniert.

Ich habe versucht, eine Post-Anfrage zu senden, um ein Web-Token mit erforderlichen Daten zu bekommen - Benutzername ein Passwort und es hat funktioniert. Ich konnte das Token bekommen.

Ich machte eine ganze Reihe von Forschung die letzten zwei Tage zu diesem Thema und ich fand verschiedene Art von Anfrage Struktur und Konfigurationen, die ich alle von ihnen versucht, aber keine waren effizient. Gibt es eine Möglichkeit zu überprüfen, ob die Anfrage mit dem Header gesendet wird? Ist etwas anderes das Problem? Wenn jemand helfen kann, würde ich mich freuen. Vielen Dank.

+0

Haben Sie versucht "Access-Control-Allow-Origin: \ *" (einfache Anführungszeichen um \ * entfernt) anstelle von "Access-Control-Allow-Origin: '\ *'"? – yixiang

+0

Und Sie sollten auch überprüfen, ob Sie "withCredentials" aktiviert haben, Sie finden diese Option in [axios doc] (https://github.com/mzabriskie/axios). Dieser Wert ermöglicht das Senden des Autorisierungsheaders in einer standortübergreifenden Anforderung. Sie sollten außerdem sicherstellen, dass der Webserver "Access-Control-Allow-Credentials: true" zurücksendet. – yixiang

Antwort

0

Ich glaube, Sie diesen Code auf die bootstrap.js hinzufügen sollte (oder wo die axios definiert ist):

window.axios = require('axios'); // I think its already added 

window.axios.defaults.headers.common = { 
    'X-Requested-With': 'XMLHttpRequest' 
}; 

Sie nicht erwähnt, aber ich denke, Sie verwenden Laravel oder anderen Rahmen, was geschützt ist von csrf attack, deshalb müssen Sie das generierte Token zu Ihrem Ajax-Request-Header hinzufügen.