Cross-Origin Request Blocked:The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/v1/users/. in VueJS&Django REST

Question

I have VueJS frontend and Django REST as a backend, while running the below code of Signup I am getting below error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/v1/users/. (Reason: CORS request did not succeed). Status code: (null).

I am using Djoser for authentication.

SignUp.vue code

    <template>
    <div class="container">
        <div class="column">
            <div class="column is-4 is-offset-4">
                <h1 class="title"> Signup </h1>

                <form @submit.prevent= "submitForm">
                    <div class="field">
                        <label>Email</label>
                        <div class="control">
                            <input type="email" name="email" class="input" v-model="username">
                        </div>
                    </div>

                    <div class="field">
                        <label>Password</label>
                        <div class="control">
                            <input type="password" name="password1" class="input" v-model="password1">
                        </div>
                    </div>

                    <div class="field">
                        <label>Repeat Password</label>
                        <div class="control">
                            <input type="password" name="password2" class="input" v-model="password2">
                        </div>
                    </div>
                    
                    <!-- showing error before submit buttton -->
                    <div class="notification is-danger" v-if="errors.length">
                        <p v-for="error in errors" v-bind:key= "error"> {{ error }} </p>
                    </div>

                    <div class="field">
                        <div class="control">
                            <button class="button is-success">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</template>

<script>
import axios from 'axios'
import {toast} from 'bulma-toast'

export default {
    name: 'Signup',
    data() { // for v-modelin input tag
        return {
            username: '',
            password1: '',
            password2: '',
            errors: [] //we will push all the errors in this array
        }
    },
    methods: {
        async submitForm() {
            this.errors = []
            if (this.username == '') {
                this.errors.push('The username is missing!!')
            }

            if (this.password1 == '') {
                this.errors.push('Password is too short')
            }

            if (this.password2 != this.password1) {
                this.errors.push('Passwords are not matching')
            }

            //if no error(empty error array) we will send details to backend
            if  (!this.errors.length) {
                const FormData = {
                    username: this.username,
                    password: this.password1
                }
            }

            axios
                .post('/api/v1/users/', FormData) //calling backend api
                .then(response => { //rendering response
                    toast({
                        message: 'Account has been created, Please Login',
                        type: 'is-success',
                        dismissible: 'true',
                        pauseOnHover: 'true',
                        duration: 2000, //mili seconds
                        position: 'bottom-right',
                    })

                    this.$router.push('/login') //after successfull signup, route to Login
                })
                .catch(error => {
                    if (error.response) {
                        for (const property in error.response.data) {
                            this.errors.push(`${property}: ${error.response.data[property]}`)
                        }
                    } else if (error.message) {
                        this.errors.push('Something went wrong. Please try again!')
                    }
                })
            //console.log('submitForm')
            //console.log(this.username)
        }
    }
}
</script>

index.js(store folder)

import { createStore } from 'vuex'

export default createStore({
  state: {
    isLoading: false,
    isAuthenticated: false,
    token: ''
  },
  getters: {
  },
  mutations: {
    initializeStore(state) {
      if (localStorage.getItem('token')) {
        state.token = localStorage.getItem('token')
        state.isAuthenticated = true
      } else {
        state.token = ''
        state.isAuthenticated = false
      }
    },
    setIsLoading(state, status) {
      state.isLoading = status
    },
    setToken(state, token){
      state.token = token
      state.isAuthenticated = true
    },
    removeToken(state) { //for signout
      state.token = ''
      state.isAuthenticated = false
    }
  },
  actions: {
  },
  modules: {
  }
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:8000' //Dajngo rest url

createApp(App).use(store).use(router, axios).mount('#app')