Django+Vue跨域环境配置详解


Posted in Javascript onJuly 06, 2018

概述

在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题。

跨域不带Cookie

在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的。但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据的方式。

Webpack配置

采用Webpack dev server的 proxyTable 即可实现代理,将请求转发到后端的开发服务器上。配置方法如下:

proxyTable: {
 '/api': {
  target: 'http://127.0.0.1:8190/',
  changeOrigin: true
 },
 '/manager': {
  target: 'http://127.0.0.1:8000/',
  changeOrigin: true,
 }
}

将需要请求的真实地址在proxyTable里配置即可。

当然,proxyTable还有需要更高级的用法,这里就先不去踩那些不必要的坑。

Django CORS头配置

Django配置跨域,可以自己实现,也可以使用一个比较好用的库 django-cors-headers

在Django的配置文件里添加如下配置:

(1) 在 INSTALLED_APPS 配置项里配置如下:

INSTALLED_APPS = (
  ...
  'corsheaders',
  ...
)

(2) 在 MIDDLEWARE_CLASSES 配置项里配置如下:

MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10
  ...
  'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware',
  ...
]

CorsMiddleware 的优先级要尽可能的高,如在 CorsMiddleware 前边。

(3)增加 CORS_ORIGIN_ALLOW_ALL 配置项

在配置文件里新增 CORS_ORIGIN_ALLOW_ALL 配置项,并设置为True

CORS_ORIGIN_ALLOW_ALL = True

跨域带Cookie

按照上面的配置对 webpack Django 进行配置后,可以实现在Vue中进行跨域Ajax请求,但是请求中并不带Cookie,如果需要带Cookie,则需要进行如下配置。

Webpack配置

Webpack配置方法同不带Cookie的方法相同。

Vue配置

在Vue里需要对 axios 进行全局配置,在 main.js 里增加如下配置:

axios.defaults.withCredentials = true

Django配置

如果需要在请求中带上Cookie,Django中的跨域返回头中就不能允许所有主机,需要指定单独主机,配置如下:

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = (
  'localhost:8088',
  'localhost:8000',
  '127.0.0.1:8088',
  '127.0.0.1:8000'
)

CORS_ALLOW_HEADERS = (
  'x-csrftoken',
)

其中 CORS_ALLOW_HEADERS 配置项允许在ajax请求中定义允许自定义的头字段。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
jquery each()源代码
Feb 14 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
js中创建对象的几种方式
Feb 05 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
vue页面更新patch的实现示例
Mar 25 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 #Javascript
微信小程序实时聊天WebSocket
Jul 05 #Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 #Javascript
基于vue展开收起动画的示例代码
Jul 05 #Javascript
微信小程序实现星级评分和展示
Jul 05 #Javascript
vue-router history模式下的微信分享小结
Jul 05 #Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
SONY ICF-SW55的电路分析
2021/03/02 无线电
php printf输出格式使用说明
2010/12/05 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
js实现日历与定时器
2017/02/22 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
layui实现三级联动效果
2019/07/26 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
深入浅析Python代码规范性检测
2020/07/31 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
python绘制汉诺塔
2021/03/01 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
30年同学聚会邀请函
2014/01/25 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
水电工岗位职责
2015/02/14 职场文书
公司周年庆典致辞
2015/07/30 职场文书
我的生日感言
2015/08/03 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL