Django+Vue跨域环境配置详解
概述
在使用Django+Vue开发过程中，遇到了很多开发环境相关的问题，比如跨域，比如ajax请求参数等，本篇文章主要记录解决在开发过程中，遇到的一些问题。
跨域不带Cookie
在使用Vue脚手架开发的过程中，会使用Vue脚手架自带的Server进行项目调试，Vue自带的Server支持hotreloading，这个特性是非常好用的。但是在开发过程中，因为要与后端交互，所以在请求后端接口的时候，会遇到跨域问题，这个问题在一些职责划分清楚的团队并不存在，因为前端开发人员会才用Mock数据的方式。
Webpack配置
采用Webpackdevserver的proxyTable即可实现代理，将请求转发到后端的开发服务器上。配置方法如下:
proxyTable:{
'/api':{
target:'http://127.0.0.1:8190/',
changeOrigin:true
},
'/manager':{
target:'http://127.0.0.1:8000/',
changeOrigin:true,
}
}
将需要请求的真实地址在proxyTable里配置即可。
当然，proxyTable还有需要更高级的用法，这里就先不去踩那些不必要的坑。
DjangoCORS头配置
Django配置跨域，可以自己实现，也可以使用一个比较好用的库django-cors-headers。
在Django的配置文件里添加如下配置:
(1)在INSTALLED_APPS配置项里配置如下:
INSTALLED_APPS=( ... 'corsheaders', ... )
(2)在MIDDLEWARE_CLASSES配置项里配置如下:
MIDDLEWARE=[#OrMIDDLEWARE_CLASSESonDjango<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请求中定义允许自定义的头字段。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。