Angular 2 Django-Rest-Framework Authentifizierung mit http.post

Question

Ich habe mehr Zeit verbracht, als ich zugeben möchte, um eine Antwort auf diese Frage zu finden, aber ich kann es nicht alleine herausfinden. Ich habe eine Django-Rest-API nach this tutorial und kann httpie oder curl verwenden, um mit der API zu kommunizieren und Anmeldeinformationen zu übergeben. Ich habe auch eine eckige 2 SPA, die http.get Anfragen senden und Daten vom Server zurück erhalten kann. Alles funktioniert einwandfrei, bis ich versuche, POST zu verwenden und Authentifizierungsdaten innerhalb der App angular 2 zu übergeben, was zu einem Http 403 (Forbidden) führt.

Da die api mit curl gut funktioniert, lässt es mich denken, dass ich etwas falsch mache, indem ich die http.post in eckig sende. Hier ist mein Code:

postStuff() { 
    var body = "username=myusername&password=mypassword"; 
    var headers = new Headers(); 
    headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
    return this.http.post('http://localhost:8000/rest/', body, { headers: headers }) 
     .map(res => res.json()); 
} 

und hier ist ein Curl Beispiel, das funktioniert gut:

curl -H 'Accept: application/json; indent=4' -u myusername:mypassword http://127.0.0.1:8000/rest/ 

Gibt es eine ‚Genehmigung‘ Header, die ich brauche im Header enthalten Ich habe versucht, Authorization: Grund aber kein Glück. Ich habe auch eine Curl ausgeführt, um die erlaubten Optionen zu finden und POST ist erlaubt. Ich möchte im Grunde das Äquivalent der "-U Benutzername: Passwort" aus der Locke in meinem http.post (oder http.get, wenn es möglich ist)

Es kann auch erwähnenswert sein, dass auf die Teile der API Wo keine Authentifizierung erforderlich ist, bekomme ich eine 400 (Bad Request) mit POST, während GET gut funktioniert. Zum Beispiel funktioniert das gut:

return this.http.get('http://127.0.0.1:8000/users/') 
     .map(res => res.json()) 

und dies nicht:

return this.http.post('http://127.0.0.1:8000/users/', { headers: headers }) 
     .map(res => res.json()); 

Answer 1

Zwei Fragen angesprochen werden benötigt:

1 - Auf der Winkelseite eingestellt das withCredentials Attribut auf true :

return this.http.post('http://127.0.0.1:8000/users/', 
{ headers: headers, withCredentials: true }) 
    .map(res => res.json()); 

2- Auf der Django Seite Griff CSRF und A ccess Ursprung: Diese und CORS sind ihre eigene Dose von Würmern, die in vielen anderen Fragen im Stapelüberlauf angesprochen werden.