错误:axios post api中代码403请求失败

Question

我在这个问题上挣扎了一段时间。我有一个新的django-vue项目，刚刚创建它。当我按下发出api请求的按钮时，我得到403错误并收到"Forbidden (CSRF cookie未设置):"通过控制台。我做了一些其他小的新手项目，我从来没有在api帖子中传递CSRF令牌。我想这一定是另一个错误，但我不知道是哪个

代码如下:

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>

编辑:我刚刚在我的视图代码之前添加了api_view @api_view(['POST'])，现在的错误是:"对预飞行请求的响应不通过访问控制检查:请求的资源上不存在' access - control - allow - origin '头。"恶心:_ (

Answer 1

您可以在axios调用中添加CSRF TOKEN:

假设您已经将令牌的值存储在一个名为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)
})
}
},