HTTP篇之cookie设置（前端和后台）

前台代码：

var xhr = new XMLHttpRequest();
xhr.open('GET','http://localhost:3000/list');
xhr.withCredentials = true;
xhr.send();

XMLHttpRequest发送请求时需要设置withCredentials属性为true,来允许浏览器在自己的域设置cookie值。

如果withCredentials没有设置为true，就会出现Response Headers有Set-Cookie，但是浏览器却没有存储cookie的情况。

后台代码：

response.setHeader('Access-Control-Allow-Credentials',true);
response.setHeader('Access-Control-Allow-Origin','http://localhost:63342');
response.setHeader('Set-Cookie','token=cowshield');

后台设置的Access-Control-Allow-Credentials和前台设置的withCredentials是要结合使用的。

Access-Control-Allow-Origin是允许跨源的，通常设置为'*'。但是设置了Access-Control-Allow-Credentials后，就必须写跟Request Headers的Origin相同的地址了。

不然就会报下面这个错误（但是不影响请求和cookie存储..）

最后就是Set-Cookie了，后台响应后，就可以在浏览器看到

再来验证下是否真正成功了，也就是浏览器把cookie存储到当前域下

后续发送的请求就会在Request Headers里自动带上这个cookie了

这就搞定了。

总结一下：

前台要设置withCredentials，后台要设置Access-Control-Allow-Credentials。

前台发起请求的Origin（url的ip地址或者域名）一定要和后台设置的Access-Control-Allow-Origin相同。