Django 处理跨域的配置、前台处理ajax

一. Django处理跨域

　　跨域的处理方式有很多，使用最多的就是CORS（跨域资源共享），接下来大致提一下django中处理跨域的配置。

　　首先安装django-cors-headers模块：

pip install django-cors-headers

 　　在settings.py中配置：

'''
# 注册app
INSTALLED_APPS = [
    ...
    'corsheaders'
]

# 添加中间件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]

# 允许跨域源，True时表示允许所有跨域源，一般都设置False，通过白名单允许部分跨域
CORS_ORIGIN_ALLOW_ALL = False

# 白名单，配置指定跨域域名
CORS_ORIGIN_WHITELIST = [
    'http://www.luffy.cn:8080'
]

# 允许ajax请求携带cookie
CORS_ALLOW_CREDENTIALS = True


# 注：前台请求头携带参数，中间件拒绝Access-Control-Allow-Headers错误，中间件要设置 default_headers
from corsheaders import defaults
在 default_headers 中添加 '前端ajax请求头里面的字段名'

# 也可以直接settings.py配置以下内容
#跨域增加忽略

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_WHITELIST = ()

CORS_ALLOW_METHODS = (

    'DELETE',

    'GET',

    'OPTIONS',

    'PATCH',

    'POST',

    'PUT',

    'VIEW',

)

CORS_ALLOW_HEADERS = (

    'accept',

    'accept-encoding',

    'authorization',

    'content-type',

    'dnt',

    'origin',

    'user-agent',

    'x-csrftoken',

    'x-requested-with'

)

'''

 二. 前台处理ajax

"""
1.安装axios
cnpm install axios --save

2.src/main.js配置
// 允许ajax发送请求时附带cookie
axios.defaults.withCredentials = true;
Vue.prototype.$axios = axios; // 把对象挂载vue中


# axios发生ajax请求
$axios({
    utl: 'http://api.example.com/test',  // 请求接口
    headers: {},  // 携带请求头
    method: 'post',  // 还可以为post
    data: {},  // get通过param: {} 提交数据
})
"""