Question

我正在尝试使用Django Rest Framework和Angular 6创建密码重设api。但是，当我尝试对密码重设网址执行POST调用时，我收到一条错误消息，提示“ CSRF验证失败。请求中止”

我的url.py文件包括：

    url(r'password-reset/', auth_views.PasswordResetView.as_view()),
    url(r'password-reset/done/', auth_views.PasswordResetDoneView.as_view()),
    url(r'password-reset-confirm/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view()),
    url(r'password_reset_complete/',auth_views.PasswordResetCompleteView.as_view())

对于前端，我使用Angular如下：

我的forgot-password.html包括：

<navbar></navbar>
      <div class="container-fluid px-xl-5">
          <section class="py-5">
            <div class="row">
              <div class="col-lg-12 mb-5">
                <div class="card">
                  <div class="card-header" style="text-align: center;">
                    <h3 class="h6 text-uppercase mb-0">RESET PASSWORD FORM</h3>
                  </div>
                  <div class="card-body">
                    <form class="form-horizontal" #forgotPassword="ngForm">
                      <div class="form-group row">
                        <label class="col-md-3 form-control-label">Email Address</label>
                        <div class="col-md-6">
                          <input class="validate" #email="ngModel" [(ngModel)]="input.email" name= "email" type="email" placeholder="Email Address" class="form-control" [pattern]="emailpattern" required>
                          <div class="alert alert-danger" *ngIf="email.touched && !email.valid">Email is required!</div>                        
                        </div>
                      </div>
                      <div class="line"></div>

                      <div class="alert alert-success" *ngIf="successMessage">{{ successMessage }}</div>                        
                      <div class="alert alert-danger" *ngIf="errorMessage">{{ errorMessage }}</div>                        
                      <div class="form-group row">
                        <label class="col-md-3 form-control-label"><a routerLink="/login">Back to Login</a></label>
                        <div class="col-md-12" style="text-align: center;">
                         <button (click)="submitEmail()" type="submit" class="btn btn-primary shadow" [disabled]="!forgotPassword.valid">Send Reset Link</button>
                        </div>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </section>
      </div>

和forgot-password.ts文件如下：

import { Component, OnInit } from '@angular/core';
import { UsersService } from 'src/app/services/users.service';

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
  styleUrls: ['./forgot-password.component.scss'],
  providers: [UsersService]
})
export class ForgotPasswordComponent implements OnInit {
  input;
  emailpattern = "[a-z0 - 9!#$%& '*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&' * +/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?";
  errorMessage: string = '';
  successMessage: string = '';

  constructor(private userService: UsersService) { }

  ngOnInit() {
    this.input = {
      email: ''
    };
  }

  submitEmail() {
    this.successMessage = '';
    this.errorMessage = '';
    this.userService.resetPassword(this.input).subscribe(
      response => {
        this.successMessage = 'Please Check you mail for password reset link!';
      },
      error => this.errorMessage = 'Please enter correct email or try again later!'
    );
  }
}

最后是.service如下：

  resetPassword(data): Observable<any> {
    return this.http.post('http://127.0.0.1:8000/api/password-reset/', data);
  }

我不知道该怎么办以及如何解决此问题。

Answer 1

如果会话认证，通常使用

CSRF。 SPA不使用这种身份验证（通常使用其他模式，例如JSON Web令牌）。您可以按照以下说明在Django中禁用CSRF：Django Rest Framework remove csrf

CSRF验证失败。使用Angular调用密码重置API时请求中止

1 个答案: