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

news2025/7/14 6:10:10

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

目录

实现效果

解决跨域

获取 csrf-token

什么是  csrf-token ？

CSRF攻击的工作原理

CSRF Token的作用

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

问题

解决方案

Django 获取 CSRF Token

前端获取

 配置 Vite 代理

下载 axios

请求 CSRF Token

运行前后端项目

请求与相应

请求

响应

后端返回数据

前端接收数据

源码获取

实现效果

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

解决跨域

下载解决跨域的包：

pip install django-cors-headers

注册，并配置中间件

INSTALLED_APPS = [
    "corsheaders",
]
MIDDLEWARE.insert(0, 'corsheaders.middleware.CorsMiddleware')

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

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，就会触发以下错误：

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：

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 中注册该视图：

from django.urls import path
from . import views

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

前端获取

 配置 Vite 代理

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

npm install axios

请求 CSRF Token

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 manage.py runserver 8080

// 运行前端
npm run dev

后端处理请求：

前端获取到 token:

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

请求与相应

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

请求

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

这里我再给个示例：

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

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:

path('ask/', views.ai_talk, name='ai_talk'),  # 使用类视图

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

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格式返回数据，仅需在视图函数中加入返回代码：

# 返回 JSON 响应
return JsonResponse({
    'status': 'success',
    'message': ai_response,
})

前端接收数据

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

const aiResponse = ref<string[]>([]); // 响应数据列表

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

// 发送问题到后端
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

感谢您的观看！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2334948.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库实验：分组查询与聚集函数的使用

数据库实验：分组查询与聚集函数的使用

目录 引言一、GROUP BY核心规则与常见错误二、高级分组选项&#xff1a;ROLLUP、CUBE与GROUPING SETS三、窗口函数&#xff1a;在原始行中显示分组聚合结果四、UNION ALL合并结果集&#xff1a;解决冗余查询问题五、实验体会 结语 &#xff08;附上实验中表格的信息&#xff09…
阅读更多...
Open-TeleVision源码解析——宇树摇操方案的重要参考：VR控制人形机器人采集数据

Open-TeleVision源码解析——宇树摇操方案的重要参考：VR控制人形机器人采集数据

前言 本来针对Open-TeleVision的源码解析&#xff0c;是打算放在此文《从宇树摇操avp_teleoperate到unitree_IL_lerobot&#xff1a;如何基于宇树人形进行二次开发》中的&#xff0c;但考虑到为避免篇幅过长&#xff0c;故独立成此文 第一部分 Open-TeleVision的源码解析 如本…
阅读更多...
推流265视频，网页如何支持显示265的webrtc

推流265视频，网页如何支持显示265的webrtc

科技发展真快&#xff0c;以前在网页上&#xff08;一般指谷歌浏览器&#xff09;&#xff0c;要显示265的视频流&#xff0c;都是很鸡肋的办法&#xff0c;要么转码&#xff0c;要么用很慢的hls&#xff0c;体验非常不好&#xff0c;而今谷歌官方最新的浏览器已经支持265的web…
阅读更多...
“破解”GPT-4o生图技术：万物皆可吉卜力的技术路线推测

“破解”GPT-4o生图技术：万物皆可吉卜力的技术路线推测

&#x1f449;目录 1 GPT-4o 的神奇魔法 2 GPT-4o 可能的技术路线推测 3 结语 最近 GPT-4o 生图模型横空出世&#xff0c;效果和玩法上都有突破性的进展&#xff0c;笔者整理了一下目前相关的技术&#xff0c;抛砖引玉一下&#xff0c;希望有更多大神分享讨论。 图源小红书恶魔…
阅读更多...
基于SpringBoot的电影订票系统(源码+数据库+万字文档+ppt)

基于SpringBoot的电影订票系统(源码+数据库+万字文档+ppt)

504基于SpringBoot的电影订票系统&#xff0c;系统包含两种角色&#xff1a;管理员、用户主要功能如下。 【用户功能】 首页&#xff1a;浏览系统电影动态。 资讯信息&#xff1a;获取有关电影行业的新闻和资讯。 电影信息&#xff1a;查看电影的详细信息和排片情况。 公告信…
阅读更多...
07-算法打卡-链表-移除链表-leetcode(203)-第七天

07-算法打卡-链表-移除链表-leetcode(203)-第七天

1 题目地址 203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09;203. 移除链表元素 - 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a;[https://assets.leetc…
阅读更多...
在线地图支持天地图和腾讯地图，仪表板和数据大屏支持发布功能，DataEase开源BI工具v2.10.7 LTS版本发布

在线地图支持天地图和腾讯地图，仪表板和数据大屏支持发布功能，DataEase开源BI工具v2.10.7 LTS版本发布

2025年4月11日&#xff0c;人人可用的开源BI工具DataEase正式发布v2.10.7 LTS版本。 这一版本的功能变动包括&#xff1a;数据源方面&#xff0c;Oracle数据源支持获取和查询物化视图&#xff1b;图表方面&#xff0c;在线地图支持天地图、腾讯地图&#xff1b;新增子弹图&…
阅读更多...
粉末冶金齿轮学习笔记分享

粉末冶金齿轮学习笔记分享

有一段小段时间没有更新了&#xff0c;不知道小伙们有没有忘记我。最近总听到粉末冶金齿轮这个概念&#xff0c;花点时间来学习一下&#xff0c;总结一篇笔记分享给大家。废话不多说&#xff0c;直接开始&#xff1a; “粉末冶金”是一种制造工艺&#xff0c;包括在高压下压实…
阅读更多...
Retina：部署在神经硬件的SNN眼动追踪算法

Retina：部署在神经硬件的SNN眼动追踪算法

论文链接&#xff1a;Retina : Low-Power Eye Tracking with Event Camera and Spiking Hardware 这是一篇发表在2024CVPRW上的文章&#xff0c;做了三个contribution&#xff1a; 将SNN放在Eye Tracking任务上。提出了Ini-30数据集部署到了Spike硬件上 还是挺有趣的。但是由于…
阅读更多...
OCR API识别对比

OCR API识别对比

OCR 识别DEMO OCR识别 demo 文档由来 最开始想使用百度开源的 paddlepaddle大模型 研究了几天&#xff0c;发现表格识别会跨行&#xff0c;手写识别的也不很准确。最终还是得使用现成提供的api。。 文档说明 三个体验下来 腾讯的识别度比较高&#xff0c;不论是手写还是识别表…
阅读更多...
flutter 桌面应用之右键菜单

flutter 桌面应用之右键菜单

​在 Flutter 桌面应用开发中&#xff0c;context_menu 和 contextual_menu 是两款常用的右键菜单插件&#xff0c;各有特色。以下是对它们的对比分析&#xff1a;​ context_menu 集成方式&#xff1a;​通过 ContextMenuArea 组件包裹目标组件&#xff0c;定义菜单项。​掘金…
阅读更多...
Cygwin编译安装Acise

Cygwin编译安装Acise

本文记录Windows下使用Cygwin编译安装Acise的流程。 零、环境 操作系统Windows11Visual Studio CodeVisual Studio Code 1.92.0Cygwin 一、工具及依赖 1.1 Visual Studio Code 下载并安装Visual Studio Code, 同时安装以下插件&#xff0c; Task Explorer Output Colorizer …
阅读更多...
pyqtgraph.opengl.items.GLSurfacePlotItem.GLSurfacePlotItem 报了一个错

pyqtgraph.opengl.items.GLSurfacePlotItem.GLSurfacePlotItem 报了一个错

1. 需求是这个样子的 有一个 pyqtgraph.opengl.GLViewWidget &#xff0c;在应用启动时存在QMainWindow中&#xff0c;即父对象是QMainWindow&#xff0c;当业务需要时&#xff0c;修改它的父对象变为一个QDialog&#xff0c;可以让它从QMainWindow中弹出显示在QDialog里&#…
阅读更多...
【C++初学】课后作业汇总复习（六） 函数模板

【C++初学】课后作业汇总复习（六） 函数模板

1、函数模板 思考&#xff1a;如果重载的函数&#xff0c;其解决问题的逻辑是一致的、函数体语句相同&#xff0c;只是处理的数据类型不同&#xff0c;那么写多个相同的函数体&#xff0c;是重复劳动&#xff0c;而且还可能因为代码的冗余造成不一致性。 解决&#xff1a;使用…
阅读更多...
【第16届蓝桥杯C++C组】--- 数位倍数

【第16届蓝桥杯C++C组】--- 数位倍数

Hello呀&#xff0c;小伙伴们&#xff0c;第16届蓝桥杯也完美结束了&#xff0c;无论大家考的如何&#xff0c;都要放平心态&#xff0c;今年我刚上大一&#xff0c;也第一次参加蓝桥杯&#xff0c;刷的算法题也只有200来道&#xff0c;但是还是考的不咋滴&#xff0c;但是拿不…
阅读更多...
Numpy和OpenCV库匹配查询，安装OpenCV ABI错误

Numpy和OpenCV库匹配查询，安装OpenCV ABI错误

文章目录 地址opencv-python&#xff1a;4.x版本的对应numpyopencv-python&#xff1a;5.x版本的对应numpy方法2 ps&#xff1a;装个opencv遇到ABI错误无语了&#xff0c;翻了官网&#xff0c;github文档啥都没&#xff0c;记录下 地址 opencv-python&#xff1a;4.x版本的对应…
阅读更多...
ubuntu18.04安装miniforge3

ubuntu18.04安装miniforge3

1.下载安装文件 略&#xff08;注&#xff1a;从同事哪里拖来的安装包&#xff09; 2.修改安装文件权限 chmod x Miniforge3-Linux-x86_64.sh 3.将它安装到指定位置 micromamba activate /home/xxx/fxp/fromDukto/miniforge3 4.激活 /home/xxx/fxp/fromDukto/miniforge3…
阅读更多...
智能手机功耗测试

智能手机功耗测试

随着智能手机发展，用户体验对手机的续航功耗要求越来越高。需要对手机进行功耗测试及分解优化，将手机的性能与功耗平衡。低功耗技术推动了手机的用户体验。手机功耗测试可以采用powermonitor或者NI仪表在功耗版上进行测试与优化。作为一个多功能的智能终端，手机的功耗组成极…
阅读更多...
使用U盘安装 ubuntu 系统

使用U盘安装 ubuntu 系统

1. 准备U 盘制作镜像 1.1 下载 ubuntu iso https://ubuntu.com/download/ 这里有多个版本以供下载&#xff0c;本文选择桌面版。 1.2 下载rufus https://rufus.ie/downloads/ 1.3 以管理员身份运行 rufus 设备选择你用来制作启动项的U盘&#xff0c;不能选错了&#xff1b;点…
阅读更多...
oracle 并行度（Parallel Degree）

oracle 并行度（Parallel Degree）

在Oracle数据库中&#xff0c;并行度&#xff08;Parallel Degree&#xff09; 是用于控制并行处理任务的关键配置&#xff0c;旨在通过多进程协作加速大规模数据处 一、并行度的核心概念 并行度&#xff08;DOP, Degree of Parallelism&#xff09; 表示一个操作同时使用的并…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023