【发布时间】：2021-09-16 05:29:11
【问题描述】：
我一直在尝试从我的 Vue 前端向我的 Django 后端发送 POST 或 DELETE 请求。
我在 localhost:3000 上运行 Vue.js，在 localhost:8000 上运行 Django。 我已经使用django-cors-headers 设置了 CORS，并且能够获取请求。但是，一旦我尝试 DELETE 或 POST，我就会收到此错误：
Forbidden (CSRF cookie not set.)
我明白，我需要在我的请求标头中传递一个 CSRF 令牌，我有：
deleteImage() {
const url = this.serverURL + 'images/delete/' + this.image_data.pk;
const options = {
method: "DELETE",
headers: {'X-CSRFToken': this.CSRFtoken}
};
fetch(url, options)
.then(response => {
console.log(response);
if (response.ok){
// if response is successful, do something
}
})
.catch(error => console.error(error));
}
我从 GET 请求中获取this.CSRFtoken ，如果我使用Django docs 中显示的方法，则令牌是相同的。
我的 Django settings.py 看起来像这样：
rom pathlib import Path
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '***'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders',
'serveImages.apps.ServeimagesConfig',
'django_admin_listfilter_dropdown',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
]
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000",
"http://127.0.0.1:3000"
]
CSRF_TRUSTED_ORIGINS = [
"http://localhost:3000",
"http://127.0.0.1:3000"
]
我知道默认情况下django-cors-headers 允许标头X-CSRFToken。
我已经浏览过 StackOverflow 上有关此主题的所有先前问题，但似乎没有任何效果。
更多上下文：
views.py
from django.http import JsonResponse
import os
from django.conf import settings
from django.middleware import csrf
from .models import Image
def get_csrf_token(request):
token = csrf.get_token(request)
return token
# return JsonResponse({'CSRFtoken': token})
def index(request, dataset, class_label):
payload = {}
images_folder_url = os.path.join('static', 'images', dataset, class_label.lower())
payload['base_url'] = images_folder_url
data_query = Image.objects.filter(dataset__name=dataset, label__name=class_label).values('pk', 'path', 'isIncluded')
payload['image_data'] = list(data_query)
payload['number_of_images'] = len(payload['image_data'])
payload['CSRFtoken'] = get_csrf_token(request)
return JsonResponse(payload)
def delete_image(request, img_pk):
print(request)
# Just for testing
return JsonResponse({'status': '200'})
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('get-token', views.get_csrf_token, name='CSRFtoken'),
path('images/<str:dataset>/<str:class_label>', views.index, name='index'),
path('images/delete/<int:img_pk>', views.delete_image, name='delete_image'),
]
【问题讨论】：
标签： django vue.js django-csrf csrf-token django-cors-headers