Проверка CSRF не удалась. Запрос отменен при вызове API сброса пароля с Angular - PullRequest
Новая
       27

Проверка CSRF не удалась. Запрос отменен при вызове API сброса пароля с Angular

0 голосов
/ 16 апреля 2019

Я пытаюсь создать API для сброса пароля, используя Django Rest Framework и Angular 6. Но когда я пытаюсь выполнить POST-вызов URL-адреса для сброса пароля, я получаю сообщение об ошибке «Ошибка проверки 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 следующим образом:

мой забытый пароль.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);
  }

Я не могу понять, что делать и как решить эту проблему.

1 Ответ

0 голосов
/ 16 апреля 2019

CSRF обычно используются при аутентификации сеанса. SPA не используют этот тип аутентификации (обычно используется другой шаблон, такой как веб-токены JSON). Вы можете отключить CSRF в Django, как описано здесь: Django Rest Framework удалить csrf

...