跨域系列四：CORS进阶之cookie处理

一.Set-Cookie

　　在这一篇文章跨域系列三：CORS进阶之设置请求头信息中，可以使用CORS来设置自定义的请求头部信息，然而为了安全，默认情况下，浏览器的cookie也是不能作为信息传递给跨域的服务器的。
　　第一步，要做的是首先浏览器上有cookie。
　　第一步，是要测试把cookie发送给跨域的服务器。
　　先来完成第一步，设置cookies。
　　其实最简单的是通过javascript来设置，不过这里介绍另一种方法：通过响应头信息Set-Cookie来处理。

add_header 'Set-Cookie' 'name=value';

　　上面表示的是响应一个头部信息叫Set-Cookie，浏览器得到它的值就会自动设置cookie信息的，键为name，值为value。

　　还是按照之前的例子，从10.107.98.46:8089/select/test.html跨域到10.107.98.46:8088/AngularTodoMVC/index.html。
　　先设置10.107.98.46:8089/select/test.html对应的nginx，增加add_header 'Set-Cookie' 'name=value';配置。

　　访问一下10.107.98.46:8089/select/test.html这台服务器。

　　现在在10.107.98.46:8089这个域上就有name=value这样的cookie信息了。

　　接着在10.107.98.46:8089上把这个cookie信息跨域发送给10.107.98.46:8088这台nginx服务器。

 

二.Access-Control-Allow-Credentials
　　要发送带cookie的请求到跨域服务器中，只需要把withCredentials设为true即可。

var xhttp = new XMLHttpRequest();
xhttp.open("get", "http://10.107.98.46:8088/AngularTodoMVC/index.html", true);
xhttp.withCredentials=true
xhttp.send();

　　效果图如下：

　　大体的意思是这样，当Access-Control-Allow-Origin为*时，又把withCredentials设为了true，那是不被允许的。

　　我们先把Access-Control-Allow-Origin改为localhost:3000这台机器。

add_header 'Access-Control-Allow-Origin' 'http://10.107.98.46:8089';

　　再重新发送跨域请求。

　　之前Access-Control-Allow-Origin为*的问题解决了，可是又出现了新的错误：在服务器端Access-Control-Allow-Credentials应该被设为true。

add_header 'Access-Control-Allow-Origin' 'http://10.107.98.46:8089';

add_header 'Access-Control-Allow-Credentials' 'true';

　　再重新发起新的域跨请求。

　　可见，请求是成功的。

　　但是，服务器能得到那些cookie信息的内容吗？

 

三.echo指令
　　在nginx中还是可以轻易获取到cookie的内容的，那就是通过nginx的变量来获得。
　　$cookie_XXX这样的变量就是获取cookie内容，比如name=value这样的cookie信息可以通过$cookie_name变量获得。
　　为了验证要在nginx中把cookie的内容打印出来，我们在这里要利用一个模块：echo-nginx-module。
　　它提供了echo指令可以输出变量的内容。
　　要编译这个模块，可以参照我之前的一篇文章：如何安装nginx第三方模块。

add_header 'Access-Control-Allow-Origin' 'http://10.107.98.46:8089';
add_header 'Access-Control-Allow-Credentials' 'true'; 
echo "name = $cookie_name";

　　清除缓存，重新刷新http://10.107.98.46:8089/select/test.html。

　　重新发起跨域请求，来看下响应的信息。

　　果然，服务器上是能获得cookie的信息的。

　　特别说明：在这里，10.107.98.46:8089中设置的cookie，要能在10.107.98.46:8088能获取，cookie设置的path不能是/select，即add_header 'Set-Cookie' 'name=value';需改为add_header 'Set-Cookie' 'name=value;path=/';这块的相关知识还可以进一步查看：nginx设置cookie点滴感悟

 

附：nginx的完整配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;


    server {
        listen       8088;
        server_name  localhost;
        location / {
             #root html;
        }

        location /AngularTodoMVC {
                        add_header 'Access-Control-Allow-Origin' 'http://10.107.98.46:8089';
                        add_header 'Access-Control-Allow-Credentials' 'true';
                        echo "name = $COOKIE_name";
            #proxy_pass   http://10.107.98.46:21240/AngularTodoMVC;
            #proxy_redirect off;
            #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_set_header X-Real-IP $remote_addr;
            #proxy_set_header Host $http_host;
        }

        error_page  404              /404.html;
        location = /404.html {
                root   html;
        }


        error_page  500 502 503 504  /50x.html;
        location = /50x.html {
                root   html;
        }
    }    
    
    server {
        listen       8089;
        server_name  localhost;

                location / {
                                root html;
                }

                location /select {
                                add_header 'Set-Cookie' 'name=value;path=/';
                                proxy_pass   http://10.107.98.46:21340/select;
                                proxy_redirect off;
                                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                                proxy_set_header X-Real-IP $remote_addr;
                                proxy_set_header Host $http_host;
                }

                error_page  404              /404.html;
                location = /404.html {
                                root   html;
                }

                error_page  500 502 503 504  /50x.html;
                location = /50x.html {
                                root   html;
                }
    }    

    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

 

文章来源：http://corsbook.rails365.net/467081

附一前端学习视频地址：https://www.rails365.net/playlists