文章目录
  1. 1. 概述
  2. 2. 跨域不带Cookie
    1. 2.0.1. Webpack配置
    2. 2.0.2. Django CORS头配置
  • 3. 跨域带Cookie
    1. 3.0.1. Webpack配置
    2. 3.0.2. Vue配置
    3. 3.0.3. Django配置
  • 4. 总结
  • 概述

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

    跨域不带Cookie

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

    Webpack配置

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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配置项里配置如下:

    1
    2
    3
    4
    5
    INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
    )

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

    1
    2
    3
    4
    5
    6
    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

    1
    CORS_ORIGIN_ALLOW_ALL = True

    跨域带Cookie

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

    Webpack配置

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

    Vue配置

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

    1
    axios.defaults.withCredentials = true

    Django配置

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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请求中定义允许自定义的头字段。

    总结

    项目完成了一段时间后,才写的这篇文章,有问题再改(⊙o⊙)…。