我的问题：我使用Django制作了一个POST API，并调用了一个按钮。但是每次它都会给CSRF令牌返回错误，每次邮件请求都会返回403。我不知道哪里出了问题。
我的部分代码如下所示，其余代码可以在这里找到。
views.py的API：
class UserList(APIView):
def post(self, request, format=None):
serializer = User.objects.create()
serializer = UserSerializer(data=request.DATA)
if serializer.is_valid():
serializer.save()
return Response(serializer.data, status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
这是我在Ajax中进行的API调用：
// CSRF Token ERROR
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
//Function for the Post Api Call
var data = '{"inputs":[{"data":{"name":{"email"::{"msg"::{"enc_msg"}}}]}'
$("encrypt_button").on("click", function(e){
e.preventDefault();
$.ajax({
'type': 'POST',
'url': '/users',
'data': {
'csrfmiddlewaretoken' : csrftoken,
'data': data,
},
success: function (response) {
console.log("HIGH");
console.log(response.outputs);
},
error: function (xhr) {
console.log("HIGH");
console.log(xhr);
}
})
})
Urls.py：
urlpatterns = [
url('users', views.UserList.as_view()),
url('', main_view)
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
index.html：
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en-Us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Vignere Cypher</title>
</head>
<body>
<div class="container">
<h1>Vignere Cypher</h1>
<div class="main">
<form class="main" method="post">
{% csrf_token %}
<div class="name">
<label for="name">Your Name: </label>
<input id="name" type="text" name="name" value="{{ name }}">
</div>
<div class="email">
<label for="email">Email (To whom you want to send this message): </label>
<input id="email" type="text" name="email" value="{{ email }}">
</div>
<div class="message">
<label for="message" id="lol">Message to Encrypt: </label>
<textarea rows="5" cols="50" id="message" type="text" name="message" value="{{ message }}"></textarea>
</div>
<div class="key_input">
<label id="lol3" for="key">Enter the key:</label>
<textarea rows="1" cols="30" type="text" name="key" placeholder="Enter key" id="key_input" /></textarea>
<input type="button" value=" Encrypt " id="encrypt_button" onclick="doCrypt(false);UserAction();">
<input type="button" value=" Decrypt " id="encrypt_button1" onclick="doCrypt(true)">
<input type="button" value=" Random Key " id="encrypt_button2" onclick="">
</div>
<div class="enc_message">
<label for="enc_message" id="lol1">Encrypted Message: </label>
<textarea rows="5" cols="50" id="enc_message" type="text" name="enc_message" value="{{ enc_message }}"></textarea>
</div>
<input type="submit" value="Submit">
</div>
</form>
</div>
<script type="text/javascript" src="{% static 'main.js' %}"> </script>
</html>
