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


Posted in Javascript onMarch 13, 2020

公司最近用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问题的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
js函数和this用法实例分析
Mar 13 #Javascript
js对象简介与基本用法示例
Mar 13 #Javascript
JS自定义滚动条效果
Mar 13 #Javascript
js Math数学简单使用操作示例
Mar 13 #Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 #Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 #Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
vue组件实例解析
2017/01/10 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
JS中的多态实例详解
2017/10/15 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python中几种属性访问的区别与用法详解
2018/10/10 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python3中编码获取网页的实例方法
2020/11/16 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
廉洁校园实施方案
2014/05/25 职场文书
食品安全标语
2014/06/07 职场文书
意向书范本
2014/07/29 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS