django vue 前后端分离csrf验证问题

最新推荐文章于 2025-07-14 15:24:18 发布

Cersar_Shy

最新推荐文章于 2025-07-14 15:24:18 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： django

本文链接：https://blog.youkuaiyun.com/qq_34968927/article/details/83652718

本文介绍了在Django和Vue前后端分离的架构中，如何处理CSRF验证的问题。主要内容包括Vue的axios配置和Django的views设置，帮助开发者解决在实际开发中遇到的跨域与验证难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

django vue-cli3 前后端分离csrf验证

前言

之前写过单独的一篇相关django跨域配置部分配置，故这里忽略。

vue配置部分

文件axios.js

let config = {
   
   
    baseURL: 'http://localhost:8000/',
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: 'X-CSRFToken',
    withCredentials: true,
    //以上三个参数为我添加的csrf相关的必须参数
};

组件调用部分示例

let data = new FormData();
data.append('email',

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Cersar_Shy

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue+django前后端分离，如何解决csrf传输问题

yu11men的博客

09-07

4524

使用django时，django框架都会自带csrf的验证功能，根据django的使用文档一般是在前端页面的form表单里添加{% csrf_token %}标签，当浏览器加载该页面时，django会解析模板页面，渲染{% csrf_token %}为一个input标签，如下图所示: html页面代码 <form> {% csrf_token %} ..... </for...

Django 前后端分离项目中CSRF报403解决方法

m0_52168095的博客

11-20

471

允许跨域发送cookie，因为Django 验证csrf需要验证cookie，同时这里Django后端也要配置允许跨域发送cookie。(我这里用的是TS脚本，所以多定义了一个CSRFBACK来控制解析方法的返回值。于是从研究Django验证机制的原理出发，终于找到解决方案。MIDDLEWARE 中'django.middleware.csrf.CsrfViewMiddleware'有了csrf token后，根据官方文档在post请求时要将其放入请求头的。前后端分离项目主要前端首先要拿到csrf令牌，

1 条评论您还未登录，请先登录后发表或查看评论

vue + django 前后端分离开发处理 CSRF

狸吉、的博客

03-19

1335

vue + django + CSRF 前后端分离开发处理CSRFCSRF解决方法前后端未分离时的解决方法前后端分离后的解决方法Django 中的实现Vue 中的实现 CSRF CSRF(Cross Site Request Forgery)，跨域请求伪造，挟持用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经...

Vue前端与Django后端实现前后端分离连接

ganggun的博客

05-10

3722

Vue前端与Django后端实现前后端分离连接

应该如何将Django与Vue结合使用？

最新发布

qq_35879393的博客

07-14

765

Django与Vue的结合以API驱动为核心，通过清晰的责任划分（后端数据+前端交互）提升开发效率与可维护性。建议开发阶段开启两个独立服务（Djangorunserver和 Vue），通过代理或CORS解决跨域；生产环境则通过Nginx整合静态资源与API请求，实现一体化部署。进阶场景可扩展用户认证（DRF SimpleJWT）、实时通信（WebSocket）或SSR优化（Nuxt.js）。

前后端分离使用 CSRF

Leon_Jinhai_Sun的博客

05-23

747

前后端分离开发时，只需要将生成 csrf 放入到cookie 中，并在请求时获取 cookie 中令牌信息进行提交即可。修改 CSRF 存入 Cookie @Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { htt

vue-csrf:一个Vue.js插件，用于获取CSRF令牌

05-25

vue-csrf 一个Vue.js插件，用于获取CSRF令牌安装 yarn add vue-csrf 或者 npm install vue-csrf --save 用法进口包装 import VueCsrf from 'vue-csrf' ; Vue . use ( VueCsrf ) ; 或带有选项 import VueCsrf from 'vue-csrf' ; Vue . use ( VueCsrf , { selector : 'meta[name="csrf-token"]' , // selector of csrf element with csrf-token value attribute : 'content' , //attribute of csrf-token element } ) ; 然后您可以通过下一个命令获取csrf令牌

解决django前后端分离csrf验证的问题

12-31

以上方法并没有严格意义的前后分离，如果模板中有form表单，可以直接在模板中添加{% csrf_token %}。第二种方式前后完全分离，前端页面直接通过获取静态文件得到，然后直接发送ajax请求，得到csrftoken，此时需要...

Django+vue前后端分离项目

思想改变命运

12-26

2006

前后端分离项目搭建......

Django+vue前后端分离项目构建

oliver3455的博客

05-30

4014

Django+vue前后端分离项目构建

axios异步请求如何设置通过django的csrf验证

踩坑小王子

02-01

8307

问题描述：最近在使用vue全家桶开发前端，后端框架是django，我在使用axios做前端异步请求时，除了get之外的请求方法django都会返回403状态码，表单总是提交不上去。分析原因：通过chrome浏览器的network中，了解到是csrf的认证没有通过，所以被拒绝提交。我之前对csrf攻击和防范的原理不太了解，在axios的异步请求配置里也没有做特别的处理，所以请求被django拒绝了。...

vue与django中预防CSRF

weixin_30247781的博客

02-11

409

一、环境： vue2.0、django 1.10.x、iview 二、django后台处理 1、将django的setting的MIDDLEWARE中加入django.middleware.csrf.CsrfViewMiddleware，一般新建的django项目中会自带的。 1 MIDDLEWARE = [ 2 'django.middleware.security.Sec...

网络安全：（四）Vue 项目中的 CSRF 攻击及防御

一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。

10-21

1604

CSRF 攻击是一种常见的安全威胁，但通过合理的防御策略，我们可以有效地保护应用程序。通过集成 CSRF Token、配置 CORS 策略和使用 SameSite Cookie 属性，可以显著提升应用的安全性。在进行开发时，务必将 CSRF 防护作为重要的一环，确保用户数据和操作的安全。建议在实现 CSRF 防御的同时，定期审计代码和依赖库，及时更新以防止潜在的安全漏洞。如果你在实现过程中有任何问题或建议，欢迎在评论区讨论！希望本篇文章能够为你在 Vue 项目的安全实践中提供帮助。上一篇。

DJANGO VUE3 跨域CSRF问题刨坑

llsixly

04-26

3258

文章目录前言1.跨域问题后台django部分第一步,安装cors的扩展包第二步，导入应用第三步，插入中间件第四步，允许发送cookie第五步，设置白名单：第六步，设置允许的请求方法第七步，设置允许的其请求头第八步，测试2.CSRF问题和Cookie第一步，VUE的main.ts设置第二步，通过get请求先获取csrftoken第三步，请求中带上CSRFTOKEN 前言不行，我必须要总结一下，搞了两天，都在处理跨域的问题。看到尤大的那句直接学VUE3就好，开始了VUE3+TS的刨坑之路，只能说不懂英语的程

vue前端 django 后端解决csrf问题，亲测有效

追梦小狂魔的博客

04-01

3062

首先是后端，用户访问首页的时候通常不会有csrf问题，在这里添加cookie from django.middleware.csrf import get_token csrf_token = get_token(request) response= render(request, "index.html") response.set_cookie('csrf_token', csrf_token) return response 这样csrf就随着cookie一起过去了然后是axios的设置添加请

CSRF保护和验证

mashaokang1314的博客

07-29

4975

什么是CSRF？ CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack“或者Session Riding，通常缩写为CSRF或XSRF，是一种对网站的恶意攻击。是一种依赖web浏览器的、被混淆过的代理人攻击。常见特性依靠用户标识危害网站利用网站对用户表识的信任欺骗用户的浏览器发送HTTP请求给目标站点可以通过IM...

防止CSRF攻击

SK_study的博客

01-27

2741

防止 CSRF攻击

Python开发【Django】：中间件、CSRF

abchhcba2014的博客

02-04

374

CSRF 1、概述　　CSRF(Cross Site Request Forgery)跨站点伪造请求,举例来讲，某个恶意的网站上有一个指向你的网站的链接，如果某个用户已经登录到你的网站上了，那么当这个用户点击这个恶意网站上的那个链接时，就会向你的网站发来一个请求，你的网站会以为这个请求是用户自己发来的，其实呢，这个请求是那个恶意网站伪造的。　　为了避免上面情况的出现，Djang...

【深入浅出 Spring Security（八）】前后端分离-使用CSRF漏洞保护详讲

qq_63691275的博客

06-11

4796

前后端分离使用 CSRF 漏洞保护，首先是得从 Cookie 中获取对应的 xsrf（即csrf）令牌信息，享受服务器端的服务需要在请求参数中或者请求头中配置这个令牌信息（这里请求方式不包括GET、HEAD、OPTIONS、TRACE，如果是这四个请求方式，过滤器会直接放行），请求参数中配置名为_csrf，值是令牌信息；请求头的话配置名是X-XSRF-TOKEN，值是令牌信息。这样在一定程度上就提高了系统的安全性，不刻意去搞的话，这种方式很大程度上防御了跨站请求伪造（CSRF）。

vue django pycharm前后端分离

04-12

### 实现 Vue 和 Django 的前后端分离开发在 PyCharm 中使用 Vue 和 Django 进行前后端分离开发是一项常见的需求。以下是关于如何设置和运行此类项目的详细说明。 #### 1. 创建 Django 后端项目首先，在 PyCharm...