v一、前言

  随着项目模块越来越多,很多模块现在都是独立部署。模块之间的交流有时可能会通过cookie来完成。比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入cookie(记录着用户上下文信息),应用想要获取门户下的cookie,这就产生了cookie跨域的问题。  

v二、介绍一下cookie

v  cookie 路径:

  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能让其path路径下的页面访问。

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

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

v  cookie 域:

  domain表示的是cookie所在的域,默认为请求的地址,如网址为www.jb51.net/test/test.aspx,那么domain默认为www.jb51.net。而跨域访问,如域A为t1.test.com,域B为t2.test.com,那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.test.com;如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为t2.test.com。

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

v  反向代理概念

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

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

v   场景模拟

   两个工程web1, web2, 部署在同一台机器上的不同tomcat上,请求web1工程的index.html,如下:
 
  
  然后点击链接请求web2工程的index.jsp, 内容如下:
 

  再看一下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中的输出内容如下:
 
  

v  总结

  利用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;
}

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

v  jquery请求跨域:

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

v  jsonp格式:

  如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

v  场景模拟:

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

  web2/index.html内容如下:

  

   web2/cooke.jsp内容如下:

  

 

  web1/index.html内容如下:

  

  

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

  

  

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

   

    

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

  

  

  

  

  至此,通过jsonp方式的请求完成cookie跨域携带,也就是web1工程成功拿到了web2工程目录下的cookie。可以发现,jsonp会通过回调函数来处理服务器端返回的数据,因为返回的可以执行的js代码(也就是重写cookie的path和域),然后自动执行返回的js代码,从而达到目的。

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

  package.json中的模块依赖:

  

  调用superagent api请求:

  

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

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

        (1). 使用jsonp格式发送
        (2). 
                 ajax请求中加上字段 xhrFields: {withCredentials: true},这样可以携带上cookie

      

      

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

      

v 七、参考资料

  HTTP访问控制(CORS)

 
 

解决cookie跨域访问.2的更多相关文章

  1. 解决cookie跨域访问

    一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...

  2. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  3. 使用JSONP彻底解决Ajax跨域访问Cookie Session的方案

    最近做开发时要把图片文件放到另外一台服务器上(另外一个域名),因为这样分布式存放,网站打开速度会快很多.而我采用AJAX获取图片服务器上某用户的图片时遇到了问题,按照通常的方式无法获取信息,得到的Co ...

  4. cookie 跨域访问的解决方案

    Cookie 同域单点登录  最近在做一个单点登录的系统整合项目,之前我们使用控件实现单点登录(以后可以介绍一下).但现在为了满足客户需求,在不使用控件情况下实现单点登录,先来介绍一下单点登录.    ...

  5. cors解决Web跨域访问问题

    首先了解一下什么是跨域以及解决的几种常见方式. 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同. 举例: 相对于 ...

  6. 解决ajax跨域访问sessionid不一致问题

    根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务器就会以为 ...

  7. cookie 跨域访问

    废话不知道该说些什么...先看代码吧. cookie 是浏览器保存在用户计算机上的少量数据 //读取cookie function getCookie(name) { var arr, reg = n ...

  8. 解决Js跨域访问的问题

    1,最近有个需求,用Js获取Html标签<input type="file"/>的路径!遇到代码拒绝访问,提示安全验证,不允许跨域访问,简单的设置一下浏览器即可,不过对 ...

  9. express解决ajax跨域访问session失效问题

    最近在学习express,就用以前做的项目来进行express前后端分离的练手了,在做登陆注册的时候发现跨域的时候,session的值是会失效的,导致session里面的数据获取为undefined, ...

随机推荐

  1. 不能使用控制器“XXXController”的单个实例处理多个请求。如果正在使用自定义控制器工厂,请确保它为每个请求创建该控制器的新实例。

    原因:应用@{Html.RenderAction("aaa","XXX");}时路径路由和动作控制器不能是相同的,不然会的错. 比如:http://localh ...

  2. 一致Hash算法

    一致性哈希算法是分布式系统中经常使用的算法.比方,一个分布式的存储系统,要将数据存储到详细的节点上.假设採用普通的hash方法.将数据映射到详细的节点上,如key%N.key是数据的key.N是机器节 ...

  3. java获取unicode码

    public String toUNICODE(String s)     {         StringBuilder sb=new StringBuilder();         for(in ...

  4. <a>标签实现锚点跳跃,<a>标签实现href不跳跃另外加事件(ref传参)

    1.锚点跳跃 HTML: <div class="page_title" id="maodian"> <h1>客房节日价格管理</ ...

  5. Idea 翻译插件

    https://github.com/YiiGuxing/TranslationPlugin

  6. 对C++对象内存模型造成的影响(类/对象的大小)

    首先重新回顾一下关于类/对象大小的计算原则: 类大小计算遵循结构体对齐原则 第一个数据成员放在offset为0的位置 其它成员对齐至min(sizeof(member),#pragma pack(n) ...

  7. php 实现打印预览的功能

    <inputid="btnPrint" type="button" value="打印"onclick="javascrip ...

  8. centos 7 搭建git远程仓储 免密登录

    第一步.安装git服务 yum install git 第二步.创建git用户 adduser git 第三步开启公钥验证 vi /etc/ssh/sshd_config 讲文件中的 #PubkeyA ...

  9. 关闭危害的端口DOS命令(转载)

    rem ipseccmd -w REG -p "HFUT_SECU" -r "Block UDP/137" -f *+0:137:UDP -n BLOCK -x ...

  10. Redis(十六):集群搭建(手动和自动)

    一.概述 Redis3.0版本之后支持Cluster. 1.1.redis cluster的现状 目前redis支持的cluster特性: 1):节点自动发现 2):slave->master ...