Django+Vue跨域环境配置详解

概述

在使用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请求中定义允许自定义的头字段。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。