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 相关文章推荐
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
jQuery实现滚动效果
Nov 17 jQuery
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
javascript实现前端成语点击验证优化
Jun 24 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
用PHP制作静态网站的模板框架
2006/10/09 PHP
php 301转向实现代码
2008/09/18 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
Python实现处理逆波兰表达式示例
2018/07/30 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
西北政法大学自主招生自荐信
2014/01/29 职场文书
C++程序员求职信范文
2014/04/14 职场文书
教师读书活动总结
2014/05/07 职场文书
关于环保的活动方案
2014/08/25 职场文书
报效祖国演讲稿
2014/09/15 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
python基础之类方法和静态方法
2021/10/24 Python
Python matplotlib绘制雷达图
2022/04/13 Python