vue-resource post数据时碰到Django csrf问题的解决

公司最近用vue写前端,用vue-resource遇到的一些问题,现在记录下来。

vue-resource post数据

this.$http.post('/someUrl',data, [options]).then(function(response){
  // 响应成功回调
}, function(response){
  // 响应错误回调
});

vue-resource 向后端请求api, 公司的后台是用Django 开发的,Django为了防止跨站请求伪造,即csrf攻击,提供了CsrfViewMiddleware中间件来防御csrf攻击。

我们在html 页面里加入{% csrf %}来让django渲染出一个csrf的标签

(如果是form 提交表单的话,我们要把这个标签加在form标签内,如果是用xhr提交的话写在html页面里就可以了)

不写在form 表单内,但是实现效果是一样的,我们都需要在post 的表单中提供csrftoken我们在vue里要传送的的data 里要加上csrf的key

data{
  csrfmiddlewaretoken: '{{ csrf_token }}'
}

这样django解析表单时会解析到csrf_token, 我们post的数据就不会遇到403 forbidden了。

其实这样是投机取巧的行为,这样虽然django 也能识别,但是遇到复杂的数据时就不行了,比如数组,vue-resource post 数组的时候, 因为我之前在post的option里加了一个option {emulateJSON: true},这样vue-resource 在post数据时,会把data 转换成 application/x-www-form-urlencoded表单格式,但是这样的话,post 的数组就会被解析成arrry[0]item 这样的话,后端是不识别的,会报错。

解决方式查到是把csrftoken 放在报头里,data 传数据,具体解决方式是加一条

Vue.http.headers.common['X-CSRFToken'] = $("input[name='csrfmiddlewaretoken']").val()

其中$("input[name='csrfmiddlewaretoken']").val() 是取django 的{% csrf %}在模板解析后生成的input里的csrftoken。

其中报头的话django 在后台解析的时候会自动加上HTTP_的前缀,所以说我们的报头是 X-CSRFToken就可以了。

补充知识:VUE向django发送post返回403:CSRF Failed: CSRF token missing or incorrect

问题描述

前端是VUE,后端是django。

VUE用axios向后端发送POST代码如下:

 let params = new URLSearchParams()
  params.append('orderID', orderId)
  params.append('dishID', dishId)
  axios.post(loginUrL, params})
   .then(response => {
    console.log(response)
    cb()
   })
   .catch(error => {
    console.log(error)
    errorCb()
   })

但是服务器返回403错误,点开一看,CSRF Failed: CSRF token missing or incorrect

原因

根据这个链接https://stackoverflow.com/a/26639895

这是一个django的跨域访问问题。

django,会对合法的跨域访问做这样的检验,cookies里面存储的'csrftoken',和post的header里面的字段”X-CSRFToken'作比较,只有两者匹配,才能通过跨域检验。否则会返回这个错误:CSRF Failed: CSRF token missing or incorrect

解决方法

由上面的分析可以得出,只要在POST请求的header添加一个字段'X-CSRFToken',这个字段和cookie里面的‘csrftoken'一样就好了。

在post请求添加一个header,内容如下:

{headers: {'X-CSRFToken': this.getCookie('csrftoken')}

其中,getCookies是这样一个函数,用于将cookies里面的内容按名字取出:

getCookie (name) {
   var value = '; ' + document.cookie
   var parts = value.split('; ' + name + '=')
   if (parts.length === 2) return parts.pop().split(';').shift()
  },

最终的POST请求如下:

  params.append('orderID', orderId)
  params.append('dishID', dishId)
  axios.post(loginUrL, params, {headers: {'X-CSRFToken': this.getCookie('csrftoken')}})
   .then(response => {
    console.log(response)
    cb()
   })
   .catch(error => {
    console.log(error)
    errorCb()
   })

以上这篇vue-resource post数据时碰到Django csrf问题的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Django CSRF认证的几种解决方案

    什么是CSRF 浏览器在发送请求的时候,会自动带上当前域名对应的cookie内容,发送给服务端,不管这个请求是来源A网站还是其它网站,只要请求的是A网站的链接,就会带上A网站的cookie.浏览器的同源策略并不能阻止CSRF攻击,因为浏览器不会停止js发送请求到服务端,只是在必要的时候拦截了响应的内容.或者说浏览器收到响应之前它不知道该不该拒绝. 攻击过程 用户登陆A网站后,攻击者自己开发一个B网站,这个网站会通过js请求A网站,比如用户点击了某个按钮,就触发了js的执行. 防止攻击 Doubl

  • vue-resource post数据时碰到Django csrf问题的解决

    公司最近用vue写前端,用vue-resource遇到的一些问题,现在记录下来. vue-resource post数据 this.$http.post('/someUrl',data, [options]).then(function(response){ // 响应成功回调 }, function(response){ // 响应错误回调 }); vue-resource 向后端请求api, 公司的后台是用Django 开发的,Django为了防止跨站请求伪造,即csrf攻击,提供了Csrf

  • vue resource post请求时遇到的坑

    使用 post 请求 // global Vue object Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // in a Vue instance this.$http.get('/someUrl', [options]).th

  • vue渲染大量数据时卡顿卡死解决方法

    目录 1. 问题描述 2. 常见的解决方案 3. 解决方案流程图 4. 代码 1. 问题描述 由于业务需求,需要在一个页面中点击查询按钮时加载出所有的数据,但数据量有近10万条,渲染出现卡顿,页面卡死. 2. 常见的解决方案 - 自定义中间层 自定义nodejs中间层,获取并拆分这10w条数据, 前端对接nodejs中间层,而不是服务器 缺点:成本高 - 虚拟列表 只渲染可视区域DOM,其他隐藏区域不显示,只用div撑起高度,随着浏览器滚动,创建和销毁DOM. 虚拟列表实现起来非常复杂,可借用第

  • mybatis-plus添加数据时id自增问题及解决

    目录 mybatis-plus添加数据时id自增问题 解决方案 插入记录的主键自增赋值机制说明 代码说明 1.找到执行入口 2.看看keyGenerator的执行逻辑 3. 跟进逻辑执行 4.继续进入下一层逻辑 5.继续进入下一层逻辑 6.关键取值 7.关键赋值 自增主键 UUID mybatis-plus添加数据时id自增问题 mybatis-plus插入数据,id自增列变的很长.比如下图: mybatis-plus中遇到一个,添加数据到数据库,而数据库中的id列是自增列 使用plus中自带的

  • JSP MySQL插入数据时出现中文乱码问题的解决方法

    当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张三','female','1995-10-08','2015-11-12','Sales',2000,'是个好员工!'); 出现乱码时,可以使用语句 show variables like 'character%'; 来查看当前数据库的相关编码集. 从上图中可以看到 MySQL 有六处使用了字符集,分别为:client .connection.database.results

  • SQL Server导入导出数据时最常见的一个错误解决方法

    现在建站主要使用的还是ASP与PHP,这两种语言一般使用的数据库分别为SQL Server和mysql,这两种数据库各有各长处,也说不上谁好谁坏,看个人习惯了. SQL Server 导入和导出向导的作用是将数据从源复制到目标.该向导还可以为您创建目标数据库和目标表.但是,如果必须复制多个数据库或表,或者必须复制其他类型的数据库对象,则应改用复制数据库向导. 在数据库导入导出时总失败,错误信息如下: 复制代码 代码如下: 正在验证 (错误) 消息 错误 0xc0202049: 数据流任务 1:

  • vue异步请求数据重新渲染方式

    目录 vue异步请求数据重新渲染 下面介绍一种方法解决 自定义组件异步获取数据重新渲染 视图层 逻辑层 vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决 export default {         name: "pic",         created() {            this.getList();         },         data(){             return{num:[]}         }

  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定

  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 <style type="text/css"> [v-cloak] { display: none; } </style> 第二步.在view上引用css模块 <div id="app" v-cloak> <h1>{{message}}</h1>

  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据.检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!! 我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据.因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCreate () {

随机推荐