Django配置Ajax跨域调用/设置Cookie

背景

前段时间感觉自己使用Hexo搭建的个人独立博客使用起来颇为无力（大抵是多说关服的原因），遂萌生出了自己给自己定制一个博客的想法，恰巧又赶上了学校的“软件课程设计”，要求做一个基于数据库的软件，于是借此契机，筹划自己博客的开发。然而学校这边的条条杠杠是很多的，不得不把自己本来的需求“个人博客”更改为“博客平台”。考虑到自己前台功底实在不敢恭维，于是拉了隔壁寝专攻前台的江某某合作。经过江某某的一番教诲，我们决定采用前后端完全解耦的MVVM开发模式，即他使用Vue.js开发前端，我使用Django开发后端接口API。

于是乎，我们便碰上了Ajax跨域调用时产生的一系列问题，不过谢天谢地，问题都被顺利的解决了^_^。

ps：网上的解决方案大多是Java版本，此处提供Django的解决方案。

跨域调用

前端单纯的想要通过ajax跨域调用后端提供的API是比较简单的，可谓是前人栽树，后人乘凉，ottoyiu提供了解决Django跨域问题的插件django-cors-headers。

它的使用方法在github上介绍的是很详尽的，我这里总结一下基本的东西:

1. 首先下载这个插件

   pip install django-cors-headers

2. 然后在你的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的上边，要不然设置的跨域响应头可能起不了什么作用。

3. 最后配置一下你允许的跨域请求主机

   允许所有主机请求你的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 = FalseCORS_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还是看不到的，这个在资料三中有提到。

参考资料

1. django-cors-headers
2. ajax跨域访问时，set-cookie无效问题的解决
3. 使用withCredentials发送跨域请求凭据