Cookies with CORS

今天遇到的一个问题：

在本地开发环境中，网站是在本地的Express服务器上跑的，地址是localhost:8000（127.0.0.1：8000）,而网站里的所有AJAX请求的服务器地址则是10.10.5.240：8080。由于两者不同源，服务器无法在本地实现读/写cookie。

我们的目标是让服务器在本地可以读写cookie：

1、 origin包括scheme, host, port，所以首先第一步是把本地网站端口改成8080.

2、 为了让两者同源，我们可以修改hosts。

首先在控制台中输入sudo vim /etc/hosts，打开后输入i可以进入编辑模式。在空白处添加两条新的host。

127.0.0.1       a.zach**.com
10.10.5.240     zach**.com

添加完后，按Esc退出编辑模式后，再输入:wq保存更改退出。

左边是ip，右边是对应的域名地址。当我们在浏览器中输入一个域名时，浏览器首先得把域名地址转化成对应的ip地址。

所以添加了这两条新的host后，我们可以用a.zach**.com：8080来打开网站，同时所有AJAX请求地址换成zach**.com:8080。这样虽然两者的ip没有变，但它们却由跨域变成了同源，同时a.zach**.com是zach**.com的子域。

这样一来，当我们在父域下存入cookie后，访问子域也是可读取到这个cookie的。

3、 随意打开一个ajax地址，在控制台写入cookie。要注意的是一定要加上domain=.zach**.com;path=/, 否则子域是读不到该cookie的。

document.cookie = "userId=45fdaf1541fdfds4a;domain=.zach**5078.com;path=/";

做完上面三步以后，我们已经能够在本地的cookie中读取到userId,但是所有的ajax请求还是返回401。原来在发送ajax请求时，Request Cookies并没有带上userId这一项。

这是因为尽管CORS允许跨域请求，但是cookies还是得服从浏览器的同源策略。

4、给XHR对象设置withCredentials属性。因为项目有用jQuery,所以下面可以直接在ajaxset中全局统一设置。

     $.ajaxSetup({
       xhrFields: {
          withCredentials: true
       }
     });

5、最后修改服务器的设置。
加上这一句Access-Control-Allow-Credentials:true。同时由于设置了credentials，就不能用*来设置Origin了 Access-Control-Allow-Origin:*, 而应该相应的改成Access-Control-Allow-Origin: a.zach5078.com:8080, 记得加上端口号。