【玩转全栈】—— Django 连接 vue3 保姆级教程，前后端分离式项目2025年4月最新！！！

Edward-tan2025-04-08 11:58

本文基于之前的一个旅游网站，实现 Django 连接 vue3，使 vue3 能携带 CSRF Token 发送 axios 请求给后端，后端再响应数据给前端。想要源码直接滑倒底部。

目录

实现效果

解决跨域

[获取 csrf-token](#获取 csrf-token)

[什么是 csrf-token ？](#什么是 csrf-token ？)

CSRF攻击的工作原理

[CSRF Token的作用](#CSRF Token的作用)

在前后端分离项目中的应用

问题

解决方案

[Django 获取 CSRF Token](#Django 获取 CSRF Token)

前端获取

[配置 Vite 代理](#配置 Vite 代理)

[下载 axios](#下载 axios)

[请求 CSRF Token](#请求 CSRF Token)

运行前后端项目

请求与相应

请求

响应

后端返回数据

前端接收数据

源码获取

实现效果

Django5连接前端vue3，前后端分离式项目（Django+vue3+csrf-token+axios）

解决跨域

下载解决跨域的包：

python 复制代码 
pip install django-cors-headers

注册，并配置中间件

python 复制代码 
INSTALLED_APPS = [
    "corsheaders",
]
python 复制代码 
MIDDLEWARE.insert(0, 'corsheaders.middleware.CorsMiddleware')

允许其他端口来源（仅用于开发环境）

python 复制代码 
CORS_ALLOW_ALL_ORIGINS = True

获取 csrf-token

什么是 csrf-token？

Django中的CSRF Token（Cross-Site Request Forgery Token，跨站请求伪造令牌）主要用于防止CSRF攻击。这是一种针对网站的恶意攻击模式，攻击者通过伪装来自受信任用户的请求来利用已认证的用户数据进行非法操作。

CSRF攻击的工作原理

假设你登录了一个银行网站，并且在没有登出的情况下访问了一个恶意网站。如果该银行网站对某些敏感操作（如转账）的安全措施不足，恶意网站可以通过自动提交表单或发送AJAX请求的方式，利用你的身份和已登录状态向银行网站发起转账请求。由于请求是从你的浏览器发出的，同时包含有效的会话Cookie，银行服务器无法区分这个请求是合法的还是伪造的，从而可能导致资金被非法转移。

CSRF Token的作用

为了防止上述情况发生，Django使用CSRF Token作为额外的安全层。具体工作流程如下：

  1. 生成Token ：当用户访问一个包含表单的页面时，Django会在响应中设置一个名为csrftoken的Cookie，并且在HTML表单中插入一个隐藏字段，其值为相同的CSRF Token。

  2. 验证Token：当用户提交表单时，无论是通过POST请求还是其他非安全方法（如PUT、DELETE等），Django都会检查请求中的CSRF Token是否与存储在Cookie中的Token相匹配。只有当两者匹配时，才会处理该请求；否则，请求将被拒绝并返回403 Forbidden错误。

  3. 安全性保障：这种方法有效地阻止了第三方网站直接构造请求并利用已登录用户的会话信息执行未授权操作的可能性，因为它们无法获取到正确的CSRF Token。

在前后端分离项目中的应用

在传统的Django项目中，模板渲染机制使得CSRF Token很容易集成进每个需要保护的表单或AJAX请求中。然而，在前后端分离的应用场景下，前端可能是一个独立运行的Vue.js、React或其他JavaScript框架开发的应用，这种情况下，获取和使用CSRF Token需要一些额外的工作，比如通过特定的API接口获取Token，并确保每次请求都正确地包含了这个Token。这通常涉及到在前端代码中添加逻辑来获取和附加CSRF Token到请求头中。

问题

Django 默认启用了 CSRF保护机制，要求所有非安全 HTTP 方法 （如 POST 、PUT 、DELETE ）必须包含有效的 CSRF Token 。如果前端未正确获取或发送 CSRF Token，就会触发以下错误：

python 复制代码 
CSRF verification failed. Request aborted.
CSRF cookie not set.

在传统的 Django 项目中，CSRF Token 通常是通过模板渲染（如**{% csrf_token %}** ）或默认机制生成的，并存储在 Cookie 中,其中，**{% csrf_token %}在我之前的所有 Django 教程中都在html页面中编写了。**然而，在前后端分离的架构中：

  • 前端和后端是独立运行的。
  • 前端可能不会直接加载 Django 提供的页面，因此无法自动获取 CSRF Token。

解决方案

Django 获取 CSRF Token

Django 提供了一个专门的视图 /csrf/ ，可以用来手动获取 CSRF Token。你可以通过以下步骤实现：

配置 Django 视图

在 Django 的 urls.py 文件中添加一个视图来返回 CSRF Token：

python 复制代码 
from django.middleware.csrf import get_token
from django.http import JsonResponse

def get_csrf_token(request):
    token = get_token(request)
    return JsonResponse({'csrfToken': token})

然后在 **urlpatterns**中注册该视图：

python 复制代码 
from django.urls import path
from . import views

urlpatterns = [
    ...
    path('csrf/', views.get_csrf_token, name='get_csrf_token'),
]

前端获取

配置 Vite 代理

javascript 复制代码 
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    server: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8080', // 确保与 Django 后端地址一致
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''),
                secure: false, // 如果后端使用 HTTPS，可能需要设置为 true
            },
        },
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
    plugins: [vue()],
});

下载 axios

javascript 复制代码 
npm install axios

请求 CSRF Token

javascript 复制代码 
import axios from 'axios';

let csrfToken = null;

// 获取 CSRF Token
async function fetchCsrfToken() {
    try {
        const response = await axios.get('/api/csrf/');
        csrfToken = response.data.csrfToken;
        console.log("CSRF Token:", csrfToken);
    } catch (error) {
        console.error("Error fetching CSRF token:", error.response?.data || error.message);
    }
}

fetchCsrfToken()

运行前后端项目

python 复制代码 
# 运行后端
python manage.py runserver 8080

// 运行前端
npm run dev

后端处理请求：

前端获取到 token:

有了 token之后，前端的一系列数据就能被后端安全接收，像用户管理之类的功能就能安全得进行了。

请求与相应

前端如何发送请求给 Django ，Django又如何相应数据给前端？

请求

前面讲的 前端获取 csrf-token 其实就是响应。配置 Vite 代理后，再使用 axios 发送请求给 Django：

这里我再给个示例：

前端通过 /api/ask 发送请求，携带 CSRF Token 请求头，将用户输入的 question 以 json 形式发POST 给 Django :

javascript 复制代码 
async function sendQuestion() {
    if (!csrfToken) {
        console.error("CSRF Token is not available");
        return;
    }

    try {
        const response = await axios.post('/api/ask/', { question: question.value }, {
            headers: {
                'X-CSRFToken': csrfToken, // 添加 CSRF Token 到请求头
                'Content-Type': 'application/json', // 指定内容类型为 JSON
            },
        });
        console.log("Response from Django:", response.data);
    } catch (error) {
        console.error("Error sending question:", error.response?.data || error.message);
    }
}

后端定义 url:

python 复制代码 
path('ask/', views.ai_talk, name='ai_talk'),  # 使用类视图

视图函数接收前端的 POST 数据并解析：

python 复制代码 
def ai_talk(request):
    if request.method == 'POST':
        try:
            # 从请求体中获取 JSON 数据
            body = request.body.decode('utf-8')  # 将字节流解码为字符串
            data = json.loads(body)  # 将 JSON 字符串解析为 Python 字典

            # 获取用户输入的问题
            user_question = data.get('question', '').strip()
            print(f"用户输入的问题: {user_question}")

        except Exception as e:
            # 处理异常
            print(f"解析请求数据失败: {e}")
            return HttpResponse("请求数据无效", status=400)
    else:
        # 如果不是 POST 请求，返回错误
        return HttpResponse("仅支持 POST 请求", status=405)

得到数据：

响应

后端返回数据

Django 已经接收到了数据，可以通过 HttpResponse 或 JsonResponse 将数据返回，这里使用JsonResponse以 json格式返回数据，仅需在视图函数中加入返回代码：

python 复制代码 
# 返回 JSON 响应
return JsonResponse({
    'status': 'success',
    'message': ai_response,
})

前端接收数据

定义一个列表接收返回数据

javascript 复制代码 
const aiResponse = ref<string[]>([]); // 响应数据列表

在前端发送问题的同时，请求后端的响应：

javascript 复制代码 
// 发送问题到后端
async function sendQuestion() {
    if (!csrfToken) {
        console.error("CSRF Token is not available");
        return;
    }

    try {
        const response = await axios.post('/api/ask/', { question: question.value }, {
            headers: {
                'X-CSRFToken': csrfToken, // 添加 CSRF Token 到请求头
                'Content-Type': 'application/json', // 指定内容类型为 JSON
            },
        });

        // 获取后端返回的数据
        const responseData = response.data;
        console.log("Response from Django:", responseData);

        if (responseData.status === 'success') {
             //添加数据到相应列表
            aiResponse.value.push(responseData.message);
        } else {
            console.error("Error from backend:", responseData.message);
        }

        // 清空问题输入框
        question.value = '';
    } catch (error) {
        console.error("Error sending question:", error.response?.data || error.message);
    }
}

再显示到页面上。

源码获取

上面是 Django 代码，下面是 vue3代码。

资源地址：https://download.csdn.net/download/2403_83182682/90578132

感谢您的观看！！！

相关推荐
失去妙妙屋的米奇4 小时前
matplotlib数据展示
开发语言·图像处理·python·计算机视觉·matplotlib
搞不懂语言的程序员4 小时前
备忘录模式深度解析与实战案例
数据库·python·备忘录模式
爱的叹息5 小时前
关于 JDK 中的 jce.jar 的详解，以及与之功能类似的主流加解密工具的详细对比分析
java·python·jar
Lhuu（重开版5 小时前
2025第十六届蓝桥杯PythonB组部分题解
python
来自星星的坤5 小时前
SpringBoot 与 Vue3 实现前后端互联全解析
后端·ajax·前端框架·vue·springboot
AUGENSTERN_dc5 小时前
RaabitMQ 快速入门
java·后端·rabbitmq
程丞Q香5 小时前
python——学生管理系统
开发语言·python·pycharm
烛阴6 小时前
零基础必看！Express 项目 .env 配置，开发、测试、生产环境轻松搞定！
javascript·后端·express
燃星cro6 小时前
参照Spring Boot后端框架实现序列化工具类
java·spring boot·后端
dragon_perfect6 小时前
ubuntu22.04上设定Service程序自启动，自动运行Conda环境下的Python脚本（亲测）
开发语言·人工智能·python·conda
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03DeepSeek各版本说明与优缺点分析04Mogao=Seedream 3.0？霸榜数天，神秘文生图模型曝光（附技术报告）05DeepSeek RAGFlow构建本地知识库系统06如何在WPS和Word/Excel中直接使用DeepSeek功能07第 9 关 | 心有灵犀的二分查找与中序遍历：1.青铜挑战——逢试必考的二分查找08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10一键私有化部署Dify，轻松搞定 AI 智能客服机器人