Django rest framework Angular V5使用django rest框架，CSRF验证失败。请求中止

我使用AngularV5和Django rest框架来创建应用程序。 但当我尝试使用post方法登录应用程序时，我得到了 “CSRF验证失败。请求中止”。

禁止（403） CSRF验证失败。请求已中止。

我的代码片段如下所示：

1-在auth.service.ts中

@Injectable()
export class AuthService {

  private headers: Headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http) {}

  login(user): Promise<any> {
    let url: string = `/users`;
    return this.http.post(url, user, {headers: this.headers}).toPromise();
  }
}

使用或其子类，使请求不必通过

CsrfMiddleware

处理

csrf\u export

django.views.decorators.csrf模块中的decorator也可以应用于绑定到

/users

路由的django视图函数，以防止请求通过

CsrfMiddleware

进行处理

以上任何一种方法都适合您的系统，因为API服务和前端客户端之间存在分离

另外，我假设您没有使用基于会话的身份验证

如果使用基于会话的身份验证，请注册路由并将其绑定到在响应头中返回csrf令牌的视图函数。您可以返回

204无内容

响应

在此视图中，函数使用模块中的

get\u token

函数生成令牌

---

从响应头中获取此令牌并对其进行cookie。无论何时使用Angular 5 client发出任何非幂等类型的HTTP请求，请确保在请求头中传递此令牌。

您的客户端应用程序是否与支持服务分离？或者两者都在一个应用程序中一起提供（即Django呈现Angular 5客户端）？嗨，Sule，感谢您的更新，“是”我的客户端应用程序与支持的服务是分开的。根文件夹有两个单独的文件夹1）客户端和2）备份

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

// third party imports
// import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { CarouselModule } from 'ngx-bootstrap/carousel';

import { AppComponent } from './app.component';
import { AppRoututingModule } from './app.routing';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/layout/header/header.component';
import { FooterComponent } from './components/layout/footer/footer.component';
import { NavigationComponent } from './components/layout/navigation/navigation.component';
import { UsersComponent } from './components/users/users.component';
import { AdminComponent } from './components/admin/admin.component';
import { LoginComponent } from './components/login/login.component';
import { AuthGuard } from './auth.guard';

import  { UsersService } from './users.service';
import { AuthService } from './services/auth.service';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    FooterComponent,
    HeaderComponent,
    NavigationComponent,
    UsersComponent,
    AdminComponent,
    LoginComponent
  ],
  imports: [
    // ngx-bootstrap
    // BsDropdownModule.forRoot(),
    CarouselModule.forRoot(),

    BrowserModule,
    HttpClientModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoututingModule
  ],
  providers: [UsersService, AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

from rest_framework import status
from rest_framework.response import Response
from rest_framework.views import APIView


class TokenAPIView(APIView):
   def get(self, request):
       csrftoken = get_token(request)
       return Response(
            status=status.HTTP_204_NO_CONTENT,
            headers={'X-CSRFToken': csrftoken}
       )