Cookie跨域问题解决方案

码农公社  210.net.cn   210是何含义?10月24日是程序员节,1024 = 210、210既 210 之意。

Cookie跨域问题解决方案

一、前言

  随着项目模块越来越多,很多模块都是独立部署。模块之间的耦合有时会通过cookie来完成。

    比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入cookie(记录着用户上下文信息),应用想要获取门户下的cookie,这就产生了cookie跨域的问题。  

二、介绍一下cookiev  

    cookie路径:

  cookie一般都是用户访问页面而被创建的,但并不是只在创建cookie的页面才访问这个cookie。

    在默认情况下,出于安全方面的考虑,只有与创建cookie的页面处于同一个目录或该目录的子目录下的网页才可以访问。

    那么,此时如果希望其父级或者整个网页都能够使用cookie,就需要进行路径的设置。

  path表示cookie所在的目录,asp.net默认为/,就是根目录。

    在同一个服务器上有目录如下:/test/,/test/cd/,/test/dd/,

    现设一个cookie1的path为/test/,cookie2的path为/test/cd/,

    那么test目录下的所有页面都可以访问到cookie1,而/test/和/test/dd/目录下的页面不能访问cookie2。

  让这个设置的cookie 能被其他目录或者父级的目录下的文件访问的方法:

    document.cookie = "name = value; path=/";

  cookie 域:

  domain表示的是cookie所在的域,默认为请求的地址,如网址为www.210.net.cn/210.cx.jsp,那么domain默认为www.210.net.cn。

    而跨域访问,如域A为 t1.210.net.cn,域B为 t2.210.net.cn,那么在域A生产一个让域A和域B都能访问的cookie就要将该cookie的domain设置为.210.net.cn;如果要在域A生产一个让域A不能访问而域B能访问的cookie就要将该cookie的domain设置为 t2.210.net.cn。

三、解决cookie跨域问题之nginx反向代理

   反向代理概念

  反向代理(Reverse Proxy)方式是指以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器;并将从服务器上得到的结果返回给Internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器。

  反向代理服务器对于客户端而言它就像是原始服务器,并且客户端不需要进行任何特别的设置。客户端向反向代理的命名空间(name-space)中的内容发送普通请求,接着反向代理将判断向何处(原始服务器)转交请求,并将获得的内容返回给客户端,就像这些内容原本就是它自己的一样。


场景模拟  

两个工程web1,web2,部署在同一台机器上的不同tomcat上,请求web1工程的index.html,如下:

1.jpg

然后点击链接请求web2工程的index.jsp,内容如下:

1.jpg

再看一下nginx的配置,如下:

worker_processes 2; 
events {
  worker_connections 65535;
}
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"';
  server_names_hash_bucket_size 128;
  client_header_buffer_size 32k;
  large_client_header_buffers 4 32k;
  client_body_buffer_size  8m;
  server_tokens off;
  ignore_invalid_headers  on;
  recursive_error_pages  on;
  server_name_in_redirect off;
  sendfile    on;
  tcp_nopush   on;
  tcp_nodelay  on;
  #keepalive_timeout 0;
  keepalive_timeout 65;
  upstream web1{
     server 127.0.0.1:8089 max_fails=0 weight=1;
  }
  upstream web2 {
     server 127.0.0.1:8080  max_fails=0 weight=1;
  }
   
  server {
    listen    80;
    server_name 127.0.0.1;
    charset utf-8;
    index index.html;
    
    location /web/web1 {
      proxy_pass http://web1/web1;
      proxy_set_header Host 127.0.0.1;
      proxy_set_header  X-Real-IP    $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  
      proxy_set_header Cookie $http_cookie;
      log_subrequest on;
    }
  
    location /web/web2 {
      proxy_pass http://web2/web2;
      proxy_set_header Host 127.0.0.1;
      proxy_set_header  X-Real-IP    $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Cookie $http_cookie;
      log_subrequest on;
    }
  
    location /nginxstatus {
      stub_status on;
      access_log on;
    }
    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }
  }
}

这样就可以保证cookie在同一域下。web2工程中的index.jsp中的输出内容如下:

1.jpg

  

利用nginx的方向代理来解决cookie跨域问题,其实是通过“欺骗”浏览器来实现的,通过nginx,我们可以将不同工程的cookie放到nginx域下,通过nginx反向代理就可以取到不同工程写入的cookie。

其实上述场景中$.cookie("user", "hjzgg", {path: "/web"}); 中的path可以写成 “/”, 这样nginx的配置就更为简单了,如下:

location /web1 {
  proxy_pass http://web1;
  proxy_set_header Host 127.0.0.1;
  proxy_set_header  X-Real-IP    $remote_addr;
  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
 
  proxy_set_header Cookie $http_cookie;
  log_subrequest on;
}
 
location /web2 {
  proxy_pass http://web2;
  proxy_set_header Host 127.0.0.1;
  proxy_set_header  X-Real-IP    $remote_addr;
  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Cookie $http_cookie;
  log_subrequest on;
}

四、解决cookie跨域问题之jsonp方式请求

 jquery请求跨域:

 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的jquery.ajaxjsonp格式和jquery.getScript方式。

 jsonp格式:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。

  使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。

  意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。

  JQuery.getJSON也同样支持jsonp的数据方式调用。

场景模拟:

  两个工程web1,web2,部署在本地同一台机器上的不同tomcat上,端口分别是8080和8089。

  web2/index.html内容如下:

1.jpg

web2/cooke.jsp内容如下:

1.jpg

web1/index.html内容如下:

1.jpg

测试流程,首先通过谷歌浏览器访问http://localhost:8089/web2/index.html,F12,Network视图,查看内容如下:

1.jpg

或者通过浏览器设置->显示高级设置->隐私设置来查看写入的cookie,过程如下。

1.jpg


接着,打开另一个窗口,访问http://localhost:8080/web1/index.html,这个页面是请求web2工程写入的cookie(注意,如果我们不是通过jsonp方式去访问,那么浏览器就会出现 不允许跨域访问 的提示)。同样 F12, Network视图,查看返回的数据如下。

1.jpg


1.jpg

1.jpg


至此,通过jsonp方式的请求完成cookie跨域携带,也就是web1工程成功拿到了web2工程目录下的cookie。

可以发现,jsonp会通过回调函数来处理服务器端返回的数据,因为返回的可以执行的js代码(也就是重写cookie的path和域),然后自动执行返回的js代码,从而达到目的。


五、解决cookie跨域问题之nodejs superagent

package.json中的模块依赖:

1.jpg

调用superagent api请求: 

1.jpg


六、同一域下,不同工程下的cookie携带问题

  cookie跨域访问之后,可以成功的写入本地域。本地的前端工程在请求后端工程时,有很多是ajax请求,ajax默认不支持携带cookie,所以现在有以下两种方案:

(1). 使用jsonp格式发送

(2). ajax请求中加上字段xhrFields:{withCredentials:true},这样可以携带上cookie。

1.jpg

这样后台配置就出现了限制,需要配置一个解决跨域访问的过滤器,而且header字段Access-Control-Allow-Origin的值不能为"*", 必须是一个确定的域。

1.jpg





原文:https://www.cnblogs.com/ghjbk/p/7681375.html


评论