Django 및 AngularJS를 사용하여 POST 요청(CSRF 토큰 포함)을 생성하는 방법

Django 및 AngularJS를 사용하여 POST 요청(CSRF 토큰 포함)을 생성하는 방법

저는 이 장고 뷰에 angular.js를 사용하여 POST 요청을 작성하려고 합니다.

class PostJSON4SlickGrid(View):
    """
    REST POST Interface for SlickGrid to update workpackages
    """

    def post(self, request, root_id, wp_id, **kwargs):
        print "in PostJSON4SlickGrid"
        print request.POST
        return HttpResponse(status=200)

그래서 저는 이 자원을 만들었습니다.

myModule.factory('gridData', function($resource) {
    //define resource class
    var root = {{ root.pk }};
    return $resource('{% url getJSON4SlickGrid root.pk %}:wpID/', {wpID:'@id'},{
            get: {method:'GET', params:{}, isArray:true},
            update:{method:'POST'}
    });
});

컨트롤러에서 get 메서드를 호출하면 잘 작동합니다.url은 다음으로 번역됩니다.http://127.0.0.1:8000/pm/rest/tree/1/.

function gridController($scope, gridData){
    gridData.get(function(result) {
        console.log(result);
        $scope.treeData = result;
        //broadcast that asynchronous xhr call finished
        $scope.$broadcast('mySignal', {fake: 'Hello!'});  
    });
}

업데이트/POST 방법을 실행하는 데 문제가 있습니다.

item.$update();

이 URL 됩니다(으)로됩니다.http://127.0.0.1:8000/pm/rest/tree/1/345 하지 않을 수 URL 정의에서 후행 슬래시를 사용하지 않을 경우 이를 쉽게 피할 수 있습니다.

url(r'^rest/tree/(?P<root_id>\d+)/(?P<wp_id>\d+)$', PostJSON4SlickGrid.as_view(), name='postJSON4SlickGrid'),

대신에

url(r'^rest/tree/(?P<root_id>\d+)/(?P<wp_id>\d+)/$', PostJSON4SlickGrid.as_view(), name='postJSON4SlickGrid'),

후행 슬래시 없이 해결 방법을 사용하면 이제 403(금지됨) 상태 코드가 나오는데, 이는 아마도 POST 요청에서 CSRF 토큰을 전달하지 않기 때문일 것입니다.따라서 제 질문은 CSRF 토큰을 각도별로 작성된 POST 요청에 전달하는 방법으로 요약됩니다.

저는 crf 토큰을 헤더를 통해 전달하는 이 방법에 대해 알고 있지만, 여기 제시된 것처럼 토큰을 포스트 요청 본문에 추가할 수 있는 가능성을 찾고 있습니다.post request body에 데이터 추가 각도로 가능한가요?

추가 판독을 통해 리소스, 후행 슬래시 제거 및 현재 리소스에 대한 제한 사항(disc1 및 disc2)에 대한 논의를 살펴볼 수 있습니다.토론 중 하나에서 저자 중 한 명은 현재 리소스를 사용하지 말고 대신 이 접근 방식을 사용할 것을 권장했습니다.

이것이 1년 이상 된 것으로 알고 있지만, 누군가가 같은 문제를 발견했을 경우 Angular JS에는 이미 CSRF 쿠키 가져오기 메커니즘이 있습니다(Angular 버전).JS는 1.1.5)부터 시작하며, django가 사용하는 cookie의 이름과 서버와 통신하기 위해 사용해야 할 HTTP 헤더를 각도에 따라 말하면 됩니다.

모듈 구성을 사용하여 다음을 수행합니다.

var app = angular.module('yourApp');
app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);

이제 모든 요청은 올바른 장고 CSRF 토큰을 갖게 됩니다.내 생각에 이것은 모든 요청에 토큰을 수동으로 배치하는 것보다 훨씬 정확합니다. 왜냐하면 이것은 두 프레임워크(django와 angular)의 내장 시스템을 사용하기 때문입니다.JS).

다음과 같은 전화를 걸 수는 없습니까?

$http({
    method: 'POST',
    url: url,
    data: xsrf,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

data당신이 통과하고 싶은 것은 무엇이든 될 수 있고, 그리고 그냥 덧붙일 수 있습니다.&{{csrf_token}}그것을 위하여.

에 params:{}해 봅니다.csrfmiddlewaretoken:{{csrf_token}}내부에params

편집:

다음과 같이 요청 기관에 데이터를 전달할 수 있습니다.

item.$update({csrfmiddlewaretoken:{{csrf_token}}})

다음과 같이 머리글을 작성합니다.

var csrf = '{{ csrf_token }}'; 
update:{method:'POST', headers: {'X-CSRFToken' : csrf }} 

그것은 문서화되지 않은 문제입니다.

최근 angularjs version giving 솔루션이 작동하지 않습니다. 그래서 저는 다음을 시도했습니다.

• 마크업에서 먼저 {% crf_token %} jango 태그를 추가했습니다.

• 앱 구성 파일에 $http 검사기 추가

angular.module('myApp').config(function ( $httpProvider) {
   $httpProvider.interceptors.push('myHttpRequestInterceptor'); 
});

• 그런 다음 myHttpRequest를 정의합니다.인터셉터

angular.module("myApp").factory('myHttpRequestInterceptor', function ( ) {

   return {
             config.headers = { 
              'X-CSRFToken': $('input[name=csrfmiddlewaretoken]').val() } 
             } 
   return config; 
  }}; 
});

모든 각도의 요청에 X-CSRF 토큰을 추가할 것입니다.

그리고 마지막으로 장고 미들웨어 "django.middleware.csrf"를 추가해야 합니다.CrfViewMiddleware' CSRF 문제 해결

var app = angular.module('angularFoo', ....

app.config(["$httpProvider", function(provider) {
  provider.defaults.headers.common['X-CSRFToken'] = '<<csrftoken value from template or cookie>>';
}])

나는 이것을(를)

장고 보기에서:

@csrf_protect
def index(request):
    #Set cstf-token cookie for rendered template
    return render_to_response('index.html', RequestContext(request))

App.js에서:

(function(A) {
    "use strict";
    A.module('DesktopApplication', 'ngCookies' ]).config(function($interpolateProvider, $resourceProvider) {
        //I use {$ and $} as Angular directives
        $interpolateProvider.startSymbol('{$');
        $interpolateProvider.endSymbol('$}');
        //Without this Django not processed urls without trailing slash
        $resourceProvider.defaults.stripTrailingSlashes = false; 
    }).run(function($http, $cookies) {
        //Set csrf-kookie for every request
        $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
        $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    });
}(this.angular));

올바른 요청을 보내려면 개체를 매개 변수 형식으로 변환해야 합니다.

$http.post('/items/add/', $.param({name: 'Foo'}));//Here $ is jQuery

언급URL : https://stackoverflow.com/questions/12823524/how-to-create-a-post-request-including-csrf-token-using-django-and-angularjs