Django Vue.js PasswordResetView posted with Axios gets Error 403 Forbidden CSRF Token

I am trying to create a custom Email Restore page in the frontend with Vue.js. There, I am trying to send input with an email with Axios through /api/v1/accounts/password_reset/, so basically I am trying to use the original ResetPasswordView and instead of using its template, I am using it as an endpoint. When I submit the value, the console returns Error 403 Forbidden CSRF Token, like below. What can be done to avoid it?

Forbidden (CSRF cookie not set.): /api/v1/accounts/password_reset/
[07/Sep/2021 16:32:55] "POST /api/v1/accounts/password_reset/ HTTP/1.1" 403 2864
/Users/IvanStepanchuk/Desktop/web-project/web-backend/core/settings.py changed, reloading.
Watching for file changes with StatReloader
Performing system checks...

This is my ResetPassword.vue:

<template>
    <div id="login">
        <div class="w-100 d-flex justify-content-center" id="home__screen">
            <div class="col-sm col-lg-4 text-center align-self-center decorator__spacing">
                <div class="card bg-white p-4">
                    <h1 class="fs-3 pb-3">Recover your account</h1>
                    <form @submit.prevent="passwordReset">
                        <div class="mb-3">
                            <input type="email" class="form-control" id="username" v-model="email" aria-describedby="emailHelp" placeholder="Email con el cual se ha registrado">
                        </div>
                        <div class="alert alert-primary d-flex flex-column" role="alert" v-if="errors.length">
                            <span v-for="error in errors" v-bind:key="error">{{error}}</span>
                        </div>
                        <button type="submit" class="btn btn-primary mb-3">Enviar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ResetPassword',
  data() {
      return {
          email: '',
          errors: []
      }
  },
  components: {
    
  },
  mounted() {
      document.title = 'Company | Recover Account'
  },
  methods: {
        passwordReset() {
            this.errors = []
            if (this.email === '') {
                this.errors.push('Email field is empty')
            }

            const passwordResetForm = {
                email: this.email
            }
            axios
                .post("/api/v1/accounts/password_reset/", passwordResetForm)
                .then(response => {
                    this.$router.push('/login')
                    return response
                })
                .catch(error => {
                    this.errors.push('Something is not working well')
                    console.log(error)
                })
        }

  }
}
</script>

<style scoped>

</style>

Or what would be the best way to use custom Vue.js views to manage password reset functionality (so it doesn’t use Django templates)? Thank you!

Answer

I was able to solve that by creating custom Views.py methods and Classes, you can see the solution here: Django Rest Framework + Serializers + Vue.js, Reset Password Functionality

This is not a duplicate. It is a similar topic with a different approach that worked well.

Advertisement

Answer