背景
前段时间感觉自己使用Hexo搭建的个人独立博客使用起来颇为无力(大抵是多说关服的原因),遂萌生出了自己给自己定制一个博客的想法,恰巧又赶上了学校的“软件课程设计”,要求做一个基于数据库的软件,于是借此契机,筹划自己博客的开发。然而学校这边的条条杠杠是很多的,不得不把自己本来的需求“个人博客”更改为“博客平台”。考虑到自己前台功底实在不敢恭维,于是拉了隔壁寝专攻前台的江某某合作。经过江某某的一番教诲,我们决定采用前后端完全解耦的MVVM开发模式,即他使用Vue.js开发前端,我使用Django开发后端接口API。
于是乎,我们便碰上了Ajax跨域调用时产生的一系列问题,不过谢天谢地,问题都被顺利的解决了^_^。
ps:网上的解决方案大多是Java版本,此处提供Django的解决方案。
跨域调用
前端单纯的想要通过ajax跨域调用后端提供的API是比较简单的,可谓是前人栽树,后人乘凉,ottoyiu提供了解决Django跨域问题的插件django-cors-headers。
它的使用方法在github上介绍的是很详尽的,我这里总结一下基本的东西:
首先下载这个插件
pip install django-cors-headers
然后在你的Django项目中的settings.py中做如下配置(install app和middleware):
INSTALLED_APPS = ( ... 'corsheaders', ... ) MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10 ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ]
要注意的是,
CorsMiddleware
最好放的尽可能的往上,比如要 在CommonMiddleware
和WhiteNoiseMiddleware
的上边,要不然设置的跨域响应头可能起不了什么作用。最后配置一下你允许的跨域请求主机
允许所有主机请求你的API,这种设置下不能设置cookie,下文会说解决方案
CORS_ORIGIN_ALLOW_ALL = True
或者指定白名单。这里注意有个坑,当前后端联机调试的时候,前端在浏览器写localhost或127.0.0.1和本机的具体IP地址在白名单里是不一样的,推荐调试的时候写具体IP地址,白名单里也写具体IP地址。
CORS_ORIGIN_WHITELIST = ( '172.30.203.52:8080', 'localhost:80' )
其它的还有可以用正则配置白名单等,详见github。
到这里跨域调用是没啥问题了,但是设置cookie还是不行。也就是说以下场景会出问题:
前台登陆,将用户名密码跨域传到后台,后台校验正确,把用户填到session里,把sessionid放到cookie中,返回response,这个时候前端发现自己仍然处于未登录状态。
设置cookie
要跨域设置cookie,需要前后端的共同努力,首先看后端:
前提是插件下载好了,并且install_app和middleware都配置了。如上边提到的,将CORS_ORIGIN_ALLOW_ALL
设为false,通过白名单的方式设定允许跨域请求的请求源,然后再设置CORS_ALLOW_CREDENTIALS
配置项为True
,如下:
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'172.30.203.52:8080',
)
# If True, cookies will be allowed to be included in cross-site HTTP requests. Defaults to False.
CORS_ALLOW_CREDENTIALS = True
至此后端配置结束,然后是前端的工作:
前端只需要在没一个跨域的Ajax请求体中添加一个.withCredentials()
字段就可以啦,jquery示例如下:
$.ajax({
url: a_cross_domain_url,
// 将XHR对象的withCredentials设为true
xhrFields: {
withCredentials: true
}
然后前后端就可以愉快的cookie交互啦~
ps: 虽然已经调通,但是前端在chrome中document.cookie还是看不到的,这个在资料三中有提到。