多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 4. CORS 进阶之 cookie 处理 #### 1. Set-Cookie 在这一篇文章[CORS进阶之设置请求头信息(三)](http://www.rails365.net/articles/cors-jin-jie-zhi-she-zhi-qing-qiu-tou-xin-xi-san)中,可以使用CORS来设置自定义的请求头部信息,然而为了安全,默认情况下,浏览器的cookie也是不能作为信息传递给跨域的服务器的。 第一步,要做的是首先浏览器上有cookie。 第一步,是要测试把cookie发送给跨域的服务器。 先来完成第一步,设置cookies。 其实最简单的是通过javascript来设置,不过这里介绍另一种方法:通过响应头信息`Set-Cookie`来处理。 ``` add_header 'Set-Cookie' 'name=value'; ``` 上面表示的是响应一个头部信息叫`Set-Cookie`,浏览器得到它的值就会自动设置cookie信息的,键为`name`,值为`value`。 还是按照之前的例子,从localhost:3000跨域到nginx服务器localhost:8080。 先访问一下localhost:8080这台服务器。 ![](https://box.kancloud.cn/09e7b748d8b57cc0154e6ae195b49f4a_1114x447.png) 现在在localhost这个域上就有`name=value`这样的cookie信息了。 接着在localhost:3000上把这个cookie信息跨域发送给localhost:8080这台nginx服务器。 #### 2. Access-Control-Allow-Credentials 要发送带cookie的请求到跨域服务器中,只需要把`withCredentials`设为`true`即可。 ``` var xhttp = new XMLHttpRequest(); xhttp.open("GET", "http://localhost:8080", true); xhttp.withCredentials = true xhttp.send(); ``` 效果图如下: ![](https://box.kancloud.cn/1552580915a0227b7ba051c307e00f9d_1304x242.png) 大体的意思是这样,当`Access-Control-Allow-Origin`为`*`时,又把`withCredentials`设为了`true`,那是不被允许的。 我们先把`Access-Control-Allow-Origin`改为localhost:3000这台机器。 ``` add_header 'Access-Control-Allow-Origin' 'http://localhost:3000'; ``` 再重新发送跨域请求。 ![](https://box.kancloud.cn/b135e7a64d9ac39bea9a7bafbe1572e4_1306x230.png) 之前`Access-Control-Allow-Origin`为`*`的问题解决了,可是又出现了新的错误:在服务器端`Access-Control-Allow-Credentials`应该被设为`true`。 ``` add_header 'Access-Control-Allow-Origin' 'http://localhost:3000'; add_header 'Access-Control-Allow-Credentials' 'true'; ``` 再重新发起新的域跨请求。 ![](https://box.kancloud.cn/06f24133cf6a50b25dfbb0ef73f803cd_663x210.png) 可见,请求是成功的。 但是,服务器能得到那些cookie信息的内容吗? #### 3. echo指令 在nginx中还是可以轻易获取到cookie的内容的,那就是通过nginx的变量来获得。 `$cookie_XXX`这样的变量就是获取cookie内容,比如`name=value`这样的cookie信息可以通过`$cookie_name`变量获得。 为了验证要在nginx中把cookie的内容打印出来,我们在这里要利用一个模块:[echo-nginx-module](https://github.com/openresty/echo-nginx-module)。 它提供了`echo`指令可以输出变量的内容。 要编译这个模块,可以参照我之前的一篇文章:[nginx之编译第三方模块(六)](http://www.rails365.net/articles/nginx-zhi-bian-yi-di-san-fang-mo-kuai-liu)。 ``` add_header 'Access-Control-Allow-Origin' 'http://localhost:3000'; add_header 'Access-Control-Allow-Credentials' 'true'; echo "name = $cookie_name"; ``` 现在重新发起跨域请求,来看下响应的信息。 ![](https://box.kancloud.cn/ff9083b24dad91348e0cbe5894ee6568_736x207.png) 果然,服务器上是能获得cookie的信息的。 完结。 下一篇:[CORS进阶之Expose-Headers(五)](http://www.rails365.net/articles/cors-jin-jie-expose-headers-wu)