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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
vue实现抽屉弹窗效果
Nov 15 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
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
JS OffsetParent属性深入解析
2014/01/13 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Angular CLI 安装和使用教程
2017/09/13 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
小程序实现录音功能
2020/09/22 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python守护进程用法实例分析
2015/06/04 Python
windows下python连接oracle数据库
2017/06/07 Python
python编程羊车门问题代码示例
2017/10/25 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
现代化办公人员工作的自我评价
2013/10/16 职场文书
秸秆管理实施方案
2014/03/15 职场文书
大班亲子运动会方案
2014/06/10 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
实习推荐信格式模板
2015/03/27 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP