Ошибка: Запрос не прошел с кодом 403 в axios post api

Я борюсь с этой проблемой уже некоторое время. У меня есть новый проект django-vue, только что созданный. Когда я нажимаю кнопку, которая делает api запрос, я получаю 403 ошибку и получаю "Forbidden (CSRF cookie not set.):" через консоль. Я сделал несколько других маленьких проектов для новичков и никогда не передавал CSRF токен в api запросе. Я думаю, что это должна быть другая ошибка, но я не знаю какая

Код следующий:

views.py

from django.shortcuts import render
from django.http import HttpRequest, HttpResponse, JsonResponse, HttpResponseRedirect
from django.shortcuts import redirect
from django.contrib.auth import authenticate, login
from django.contrib.auth.decorators import login_required


import requests


def discord_login(request):
    print('Hola, cómo estas')
    return redirect(auth_url_discord)

settings.py


from pathlib import Path


ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'rest_framework.authtoken', 
    'corsheaders', 
    'djoser',

    'key',
    'discordlogin',
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:8080',
]



REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.TokenAuthentication',
    ),
}

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'leviathan_django.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'leviathan_django.wsgi.application'




DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}



AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]



LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True



STATIC_URL = '/static/'



DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

home.vue

<template>
  <div class="home">
    <div>
    
      <button class="button is-dark" v-on:click="loginWDiscord()">Login with discord</button>

    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Home',

  mounted() {
    document.title = 'Home | Leviathan'
  },
  methods: {
    
      async loginWDiscord() {


      await axios 
          .post("http://127.0.0.1:8000/api/v1/oauth2/login/")
          .then(response => {
              console.log(response)              
          })
          .catch(error => {
              console.log(error)
          })

      }

    },
}
</script>

Вы можете добавить CSRF TOKEN в вызов axios таким образом :

Допустим, значение маркера хранится в переменной csrfToken.

methods: {

  async loginWDiscord() {
  // Get the csrf-token
  csrfToken = "{% csrf_token %}";
  post_url = 'http://127.0.0.1:8000/api/v1/oauth2/login/';

  await axios(
      {
          method: 'post',
          url: post_url,
          data: {  // Change the datas to post for suit your needs
              username: 'demo',
              password: 'MyG00dyP4ss'
          },
          headers: {"X-CSRFToken": csrfToken},  // Here you pass the token
      })
      .then(response => {
          console.log(response)              
      })
      .catch(error => {
          console.log(error)
      })

  }

},
Вернуться на верх