10、分离的前后台交互、跨域问题解决

分离的前后台交互

后台处理跨域

'''
https://github.com/ottoyiu/django-cors-headers/

安装django-cors-headers模块

在settings.py中配置
# 注册app
INSTALLED_APPS = [
	...
	'corsheaders'
]
# 添加中间件
MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]


# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = False
# 配置指定跨域域名
CORS_ORIGIN_WHITELIST = [
	'http://example.com'
]

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


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

前台处理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: {} 提交数据
})
"""