Angular 2 POST geben 403 CSRF Fehler Buchung auf Django Server

Question

Ich habe Probleme mit 403/CSRF Probleme beim Angular 2 zu POST zu meinem Django-Server zu verwenden.

Sowohl mein Servercode als auch mein Angular-Code werden auf demselben 127.0.0.1-Server ausgeführt.

Wenn der Winkel Code auf den Server ausgeführt wird, liefert ein 403 4612 Fehler

Meine Django Ansicht Code sieht wie folgt aus (ich die Django REST-Framework verwende):

rom django.utils import timezone 
 
from django.shortcuts import render, get_object_or_404, redirect 
 
from django.contrib.auth.models import User 
 
from .models import Item, Seen, Keyword, Flag 
 
from django.utils.decorators import classonlymethod 
 
from django.views.decorators.csrf import csrf_exempt 
 
from rest_framework import viewsets 
 
from items.serializers import ItemSerializer, UserSerializer 
 
from rest_framework.authentication import SessionAuthentication 
 

 
class CsrfExemptSessionAuthentication(SessionAuthentication): 
 
    def enforce_csrf(self, request): 
 
     return # To not perform the csrf check previously happening 
 

 

 
class ItemViewSet(viewsets.ModelViewSet): 
 
    queryset = Item.objects.all().order_by('-date_added') 
 
    serializer_class = ItemSerializer 
 
    authentication_classes = (CsrfExemptSessionAuthentication,) 
 
    #permission_classes = [IsAccountAdminOrReadOnly] 
 

 
    """ 
 
     Use the API call query params to determing what to return 
 

 
     API params can be: 
 

 
     ?user=<users_id>&num=<num_of_items_to_return>&from=<user_id_of_items_to_show> 
 
    """ 
 

 
    def get_queryset(self): 
 
     this_user = self.request.query_params.get('user', None) 
 
     restrict_to_items_from_user_id = self.request.query_params.get('from', None) 
 
     quantity = self.request.query_params.get('num', 20) 
 

 
     if restrict_to_items_from_user_id is not None: 
 
      
 
      queryset = Item.objects.filter(owner=restrict_to_items_from_user_id, active=True).order_by('-date_added')[0:int(quantity)] 
 
     elif this_user is not None: 
 
      
 
      queryset = Item.objects.filter(active=True, credits_left__gt=0).exclude(pk__in=Seen.objects.filter(user_id=this_user).values_list('item_id', flat=True))[0:int(quantity)] 
 
     else: 
 
      
 
      queryset = Item.objects.filter(active=True, credits_left__gt=0)[0:int(quantity)] 
 

 
     return queryset

Mein Angular 2-Code, der den POST sieht, sieht so aus:

import {Injectable, Inject} from 'angular2/core'; 
 
import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http'; 
 
import {UserData} from './user-data'; 
 
import 'rxjs/add/operator/map'; 
 

 

 
@Injectable() 
 
export class ConferenceData { 
 
    static get parameters(){ 
 
    return [[Http], [UserData]]; 
 
    } 
 

 
    constructor(http, user) { 
 
    // inject the Http provider and set to this instance 
 
    this.http = http; 
 
    this.user = user; 
 
    } 
 

 
    load() { 
 

 
    // Example of a PUT item 
 
    let body = JSON.stringify({ url: 'fred', item_type: 'P', owner_id: 2 }); 
 

 
    let headers = new Headers(); 
 
    headers.append('Content-Type', 'application/json'); 
 

 
    this.http.post('http://127.0.0.1:8000/api/items/', body, { 
 
     headers: headers 
 
     }) 
 
     .subscribe(
 
     data => { 
 
      alert(JSON.stringify(data)); 
 
     }, 
 
     err => this.logError(err.json().message), 
 
     () => console.log('Authentication Complete') 
 
    ); 
 
    } 
 
}

Ich finde CSRF Probleme wirklich schwierig in den Griff zu bekommen!

EDIT: Added CORS-Einstellungen

Einstellungen Aussehen Meine CORS wie folgt aus:

CORS_ORIGIN_ALLOW_ALL = True  
 
CORS_ORIGIN_WHITELIST = (
 
    'veeu.co', 
 
    '127.0.0.1' 
 
) 
 
CORS_ORIGIN_REGEX_WHITELIST =() 
 
CORS_URLS_REGEX = '^.*$' 
 
CORS_ALLOW_METHODS = (
 
    'GET', 
 
    'POST', 
 
    'PUT', 
 
    'PATCH', 
 
    'DELETE', 
 
    'UPDATE', 
 
    'OPTIONS' 
 
) 
 
CORS_ALLOW_HEADERS = (
 
    'x-requested-with', 
 
    'content-type', 
 
    'accept', 
 
    'origin', 
 
    'authorization', 
 
    'x-csrftoken' 
 
) 
 
CORS_EXPOSE_HEADERS =() 
 
CORS_ALLOW_CREDENTIALS = False

Answer 1

vielmehr die CSRF-Schutz als deaktivieren, können Sie das Token als Header hinzufügen zu deinen Ajax-Anfragen. Siehe the docs, insbesondere der letzte Abschnitt für AngularJS.

Sie müssen möglicherweise csrf_ensure für die anfängliche Django-Ansicht verwenden, um sicherzustellen, dass Django den csrf-Cookie setzt.