我已经创建了一个后端 Django 应用程序，目前正在连接一个 Angular 前端，该前端使用 Django Rest 框架从 API 设置中请求数据，并且遇到了我登录的用户（在后端）的问题，他们在前端登录并不重要）对 API 的所有后期请求都会收到 403 错误。我认为这是因为 Django 中的 CSRF 保护。
我查看了一个解决这个问题的线程，并尝试实现该解决方案从这个线程没有运气。
注销的用户可以发送注册或登录的后请求。但是，当登录用户尝试时，会收到 403 错误。在浏览 DRF API 时发送相同的数据是成功的，这就是为什么我认为它与 CSRF 有关。更清楚地说，如果我以前端用户身份登录并尝试登录或注册新用户（这些部分在开发中不会被阻止），我会收到 403 响应。如果我登录可浏览的 API 并发送完全相同的帖子内容，它可以成功尝试再次登录或注册新用户。
难道是因为我添加的自定义标头可能会替换 CSRF 标头？在这种情况下，我该如何重新制作它，因为需要该标头，否则我会得到 415 不支持的媒体类型。
下面是 Angular 服务，它提供了向服务器发送登录请求的功能：
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators'
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Userlogon } from '../_models/Userlogon';
import { User } from '../_models/User';
const HttpOptions = {
headers: new HttpHeaders({ "Content-type": "application/json" })
};
@Injectable({
providedIn: 'root'
})
export class AuthService {
loginobject: any;
private usersUrl= '/api/v1/accounts/';
private logonUrl= '/api/v1/auth/login/';
private logoutUrl= '/api/v1/auth/logout/';
constructor(
private http: HttpClient
) { }
login(username: string, password: string) {
this.loginobject=JSON.stringify({"username": username, "password": password});
return this.http.post<any>(this.logonUrl, this.loginobject, HttpOptions)
.pipe(map(user => {
if (user){
console.log("If statement satisfied");
localStorage.setItem('currentUser', JSON.stringify(user));
}
return user;
}));
}
logout(){
localStorage.removeItem('currentUser');
return this.http.get<any>(this.logoutUrl).subscribe(response => console.log(response));
}
}
这是我在其中实现了提供程序选项的应用程序模块：
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http'
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { AlertComponent } from './_directives/alert.component';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuardService } from './_guards/auth-guard.service';
import { AlertService } from './_services/alert.service';
import { AuthService } from './_services/auth.service';
import { UserService } from './_services/User.service';
@NgModule({
declarations: [
AppComponent,
RegisterComponent,
LoginComponent,
AlertComponent,
ProfileComponent,
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
HttpModule
],
providers: [
{
provide: XSRFStrategy,
useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
这是 Django 处理的模板：
{% load static %}
{% csrf_token %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularWebapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
{% block javascript %}
<script type="text/javascript" src="{% static 'runtime.js' %}"></script><script type="text/javascript" src="{% static 'polyfills.js' %}"></script><script type="text/javascript" src="{% static 'styles.js' %}"></script><script type="text/javascript" src="{% static 'vendor.js' %}"></script><script type="text/javascript" src="{% static 'main.js' %}"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
最后是 Django 视图代码：
from django.shortcuts import render
from django.contrib.auth import authenticate, login, logout
from rest_framework import permissions, viewsets, status
from rest_framework.views import APIView
from rest_framework.response import Response
from authentication.models import Account
from authentication.permissions import IsAccountOwner
from authentication.serializers import AccountSerializer, LoginSerializer
from getorgname import scrapeorg, idgenerator
import json
# Create your views here.
class AccountViewSet(viewsets.ModelViewSet):
lookup_field='username'
queryset=Account.objects.all()
serializer_class= AccountSerializer
def get_permissions(self):
if self.request.method in permissions.SAFE_METHODS:
return (permissions.AllowAny(),)
if self.request.method == 'POST':
return (permissions.AllowAny(),)
return (permissions.IsAuthenticated(), IsAccountOwner(),)
def create(self, request):
serializer=self.serializer_class(data=request.data)
if serializer.is_valid():
newuser=serializer.validated_data
Account.objects.create_user(
username=newuser.get('username'),
email=newuser.get('email'),
org_name=scrapeorg(newuser.get('org_number')),
org_number=newuser.get('org_number'),
cid=idgenerator(),
utype=newuser.get('utype'),
password=newuser.get('password'),
)
#Account.objects.create_user(**serializer.validated_data)
return Response(serializer.validated_data, status=status.HTTP_201_CREATED)
return Response({
'status': 'Bad request',
'message': 'Account could not be created with received data',
}, status=status.HTTP_400_BAD_REQUEST)
class LoginView(APIView):
def post(self, request):
#data=json.loads(request.body)
serializer=LoginSerializer(data=request.data)
if serializer.is_valid():
data=serializer.validated_data
username=data.get('username')
password=data.get('password')
account=authenticate(username=username, password=password)
if account != None:
login(request, account)
serialized = AccountSerializer(account)
return Response(serialized.data)
else:
return Response({
'status': 'Unauthorized',
'message': 'Username %s and password invalid' % username
}, status=status.HTTP_401_UNAUTHORIZED)
return Response({
'status': 'Bad request',
'message': 'Invalid data for a login request',
}, status=status.HTTP_400_BAD_REQUEST)
class LogoutView(APIView):
def get_permissions(self):
return (permissions.IsAuthenticated(), IsAccountOwner(),)
def get(self, request):
logout(request)
return Response({
'status': 'Success',
'message': 'Successfully processed logout request',
})
