角度2 + DJango 1.10.6

Question

でCSRFトークンが見つからないか正しくないAngular 2とDjango 1.10.6を使用しています。私はpostメソッドを作成します。フロントエンドからのリクエストを送信した後、CSRFトークンが見つからないか正しくないことを示します。

user.html 
<form #f="ngForm" (ngSubmit)="createUser(f.value, f.valid,f)" novalidate> 
.... 
</form> 

Angular2コンポーネント

createUser(model: User, isValid: boolean, f: any) { 
    // check if model is valid 
    // if valid, call API to save customer 
    if (isValid) { 
     this.userCreateService.createUser(model).subscribe(
      res => { 
       this.success = "User Create Success"; 
       this.user = new User(); 
       this.errorMsg=null 
      }, 
      err => { 
       this.errorMsg = err; 
       this.success=null; 
      }); 

    } 
} 

これは私のAngular2サービス

 @Injectable() 
export class UserCreateService { 

    constructor(private http: Http) { } 

    // private instance variable to hold base url 
    private userCreateUrl = '/api/user/users/'; 

    // Add a new User 
    createUser(body: Object): Observable<User> { 
    let bodyString = JSON.stringify(body); // Stringify payload 
    let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON 
    let options = new RequestOptions({ headers: headers }); // Create a request option 

    return this.http.post(this.userCreateUrl, body, options) // ...using post request 
     .map(this.extractData) // ...and calling .json() on the response to return data 
     .catch(this.handleError); //...errors if any 
    } 

Answer 1

ある質問をする少数の瞬間の後、私はこのように私の問題を解決してきました。 アングル2サービスで作成されたメソッド。

getCookie(name) { 
    let value = "; " + document.cookie; 
    let parts = value.split("; " + name + "="); 
    if (parts.length == 2) 
     return parts.pop().split(";").shift(); 
    } 

とのcreateUser（）、角serviceメソッドに

let headers = new Headers({ 
     'Content-Type': 'application/json', 
     'X-CSRFToken': this.getCookie('csrftoken') 
    }); // ... Set content type to JSON 

に

let headers = new Headers({ 
     'Content-Type': 'application/json'}); // .Set content type to JSON 

を交換してください。