Angular V5与django休息框架,CSRF验证失败。请求中止

时间:2017-11-24 06:34:21

标签: django-rest-framework angular5

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

禁止(403) CSRF验证失败。请求已中止。

我的代码段如下:

1- in 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();
  }
}

2- app.module.ts

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 { }

0 个答案:

没有答案