Я разрабатываю свой первый проект и был заблокирован CSRF в течение последних 4 дней.
Мне нужно попробовать:
Аутентифицированопользователь должен отправить угловую форму в API django rest_framework.
Информация, переданная в API django, должна затем использоваться для отправки запроса мыла в службу wsdl третьей стороны.
После этого ответ должен быть сохранен в файл .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,)
views.py
class PersonSearchView(TemplateView):
template_name = 'intelportal/person_search_new.html'
login_required = True
urls.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';
}
})();
Я действительно надеюсь, что есть сomeone, который может пролить свет на это, так как у меня не осталось волос, чтобы выдернуть:)