时间戳

首页 > 解决方案 > django，角度，csrf，rest_framework，403，

python - django，角度，csrf，rest_framework，403，

问题描述

我正在开发我的第一个项目，最近 4 天被 CSRF 阻止了。

我需要尝试并完成的是：

  1. 经过身份验证的用户应向 django rest_framework api 提交一个角度表单。

  2. 然后应该使用提交给 django api 的信息来向 3rd 方 wsdl 服务提交一个soap请求。

  3. 然后应将响应保存到 .pdf 文件并在页面上呈现。

我目前停留在这个过程的第一点，甚至还没有从第 2 点和第 3 点开始作为第 1 点。

错误

Forbidden (CSRF token missing or incorrect.)

person_search_new.html：

<!DOCTYPE html>

<html lang="en">

{% extends 'base/base.html' %}
{% block title %}Person Search{% endblock %}
{% load static %}


  <body>

    <!-- Navigation -->

    {% block body %}

      <!-- Page Content -->
      <div class="container">

        <!-- Page Heading/Breadcrumbs -->
        <h1 class="mt-4 mb-3">Intelligence Portal
          <small>Person Search</small>
        </h1>

        {% if user.is_authenticated %}
          <p>
            User: {{ user.get_username }}
          </p>

          <ol class="breadcrumb">
            <li class="breadcrumb-item">
              <a href="{% url 'member:member' %}">Member Zone</a>
            </li>
            <li class="breadcrumb-item">
              <a href="{% url 'intelportal:intelportal' %}">Intelligence Portal</a>
            </li>
            <li class="breadcrumb-item active">Person Search</li>
          </ol>

          <!-- Content Row -->
          <div class="row">
            <!-- Sidebar Column -->
            <div class="col-lg-3 mb-4">
              {% include 'base/sidebar_template.html' %}
            </div>
            <!-- Content Column -->
            <div class="col-lg-9 mb-4">
              <h2>Person Search</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, et temporibus, facere perferendis veniam beatae non debitis, numquam blanditiis necessitatibus vel mollitia dolorum laudantium, voluptate dolores iure maxime ducimus fugit.</p>

              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
              <script src="{% static 'intelportal/person_search_form_new.js' %}"></script>
              <script src="{% static 'intelportal/form_builder_config.js' %}"></script>

              <div ng-app="formBuilder">
                  {% csrf_token %}
                  {% verbatim %}
                  <div ng-controller="personSearchController">
                    <div class="form-group">
                        <form class="form-control" action="" method="post" enctype="multipart/form-data">
                            <div class="control-group form-group">
                                <label>
                                    <input type="radio" ng-model="selectedType" value="idNumber">
                                    ID Number
                                </label>
                                <label>
                                    <input type="radio" ng-model="selectedType" value="passportNumber">
                                    Passport Number
                                </label>
                                <label>
                                    <input type="radio" ng-model="selectedType" value="initialsSurnameDob">
                                    Initials, Surname and Date of Birth
                                </label>
                            </div>
                                <div ng-switch="selectedType">
                                    <div ng-switch-when="idNumber">
                                        <p>
                                            <label>
                                                ID Number:
                                                <input type="text" ng-model="idNumberInput" name="idNumber" placeholder="ID Number" ng-required="true">
                                            </label>
                                        </p>
                                        <p>
                                            <label>
                                                Your Reference:
                                                <input type="text" ng-model="yourReferenceInput" name="yourReference" placeholder="Your Reference" ng-required="true">
                                            </label>
                                        </p>
                                        <p>
                                            <button ng-click="add(idNumberInput, yourReferenceInput)" type="submit" class="btn btn-primary">Submit</button>
                                        </p>
                                    </div>
                                    <div ng-switch-when="passportNumber">
                                        <p>
                                            <label>
                                                Passport Number:
                                                <input type="text" ng-model="passportNumberInput" name="passportNumber" placeholder="Passport Number" ng-required="true">
                                            </label>
                                        </p>
                                        <p>
                                            <label>
                                                Your Reference:
                                                <input type="text" ng-model="yourReferenceInput" name="yourReference" placeholder="Your Reference" ng-required="true">
                                            </label>
                                        </p>
                                        <p>
                                            <button ng-click="submit(passportNumberInput, yourReferenceInput)" type="submit" class="btn btn-primary">Submit</button>
                                        </p>
                                    </div>
                                    <div ng-switch-when="initialsSurnameDob">
                                        <p>
                                            <label>
                                                Initials / Forenames:
                                                <input type="text" ng-model="initialsInput" name="initials" placeholder="Initials / Forenames" ng-required="true">
                                            </label>
                                        </p>
                                        <p>
                                            <label>
                                                Surname:
                                                <input type="text" ng-model="surnameInput" name="surname" placeholder="Surname" ng-required="true">
                                            </label>
                                        </p>
                                        <p>
                                            <label>
                                                Date of Birth:
                                                <input type="text" ng-model="dobInput" name="dob" placeholder="Date of Birth" ng-required="true">
                                            </label>
                                        </p>
                                        <p>
                                            <label>
                                                Your Reference:
                                                <input type="text" ng-model="yourReferenceInput" name="yourReference" placeholder="Your Reference" ng-required="true">
                                            </label>
                                        </p>
                                        <p>
                                            <button ng-click="submit(initialsInput, surnameInput, dobInput, yourReferenceInput)" type="submit" class="btn btn-primary">Submit</button>
                                        </p>
                                    </div>
                                </div>
                        </form>
                    </div>
                  </div>
              </div>
                  {% endverbatim %}

            </div>
          </div>
          <!-- /.row -->



        {% else %}

          <br>
            <p>
              This area requires member authentication. Please log in with your authorised member account.
            </p>
            <p>
              <a href="{% url 'member:login' %}">Go to login</a>
            </p>
          </br>

        {% endif %}

      </div>

    {% endblock %}

    <!-- /.container -->

    <!-- Footer -->

    <!-- Bootstrap core JavaScript -->

  </body>

</html>

api.py：

from rest_framework.viewsets import ModelViewSet
from .serializers import PersonIdNumberSerializer
from .models import NormalSearch
from rest_framework import views, status, permissions

class PersonIdNumberViewSet(ModelViewSet):
    login_required = True
    queryset = NormalSearch.objects.all()
    serializer_class = PersonIdNumberSerializer
    permission_classes = (permissions.IsAuthenticated,)

视图.py

class PersonSearchView(TemplateView):
    template_name = 'intelportal/person_search_new.html'
    login_required = True

网址.py

from django.urls import path, include
from . import views
from .api import PersonIdNumberViewSet
from rest_framework.routers import DefaultRouter


app_name = 'intelportal'

router = DefaultRouter()
router.register(r'persons', PersonIdNumberViewSet, base_name='persons')

urlpatterns = [
    path('person_search', views.PersonSearchView.as_view(), name='person_search'),
    path('', views.IntelPortalView.as_view(), name='intelportal'),
    path('person_search/', include(router.urls)),

    ]

person_search_form_new.js（.js 控制器）

(function(){
     'use strict';
    angular.module('formBuilder', [])
      .controller('personSearchController', ['$scope', '$http', personSearchControllerFunction]);

       function personSearchControllerFunction($scope, $http){
            $scope.submit = function(idNumber,reference){
                var person = {
                    list: list.id,
                    idNumber: idNumber,
                    reference: reference,
                };
                $http.post('/intelportal/person_search/persons/', person)
                    .then(function(response){
                        list.person.push = (response.data);
                    },
                    function(){
                        alert('Could not create query')
                    });
            };
            $scope.data = [];
            $http.get('/intelportal/person_search/persons/')
                .then(function(response){
                    $scope.data = response.data;
                });
       };
})();

form_builder_config.js（.js 配置）

(function(){
    'use strict';

    angular.module('formBuilder')
        .run(['$http', run]);

    function run($http){
        $http.defaults.xsrfHeaderName = 'X-CSRFToken';
        $http.defaults.xsrfCookieName = 'csrftoken';
    }

})();

我真的希望有人可以阐明这一点，因为我没有任何头发可以拔掉:)

标签： pythonangularjsdjangocsrf

解决方案

推荐阅读