解决cookie跨域访问

一、前言

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

二、介绍一下cookie

  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=/";

  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。

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

  反向代理概念

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

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

   场景模拟

两个工程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中的输出内容如下:

  总结

利用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.ajax jsonp格式和jquery.getScript方式。

  jsonp格式:

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

  场景模拟:

  两个工程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代码,从而达到目的。

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

  package.json中的模块依赖:

  

  调用superagent api请求:

  

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

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

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

      

      

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

      

 

 七、参考资料

  HTTP访问控制(CORS) 

     JavaScript跨域总结与解决办法   

     window.name实现的跨域数据传输

          使用 window.name 解决跨域问题

 

转载于:https://www.cnblogs.com/hujunzheng/p/5744755.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/531291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React使用antd Table生成层级多选组件

一、需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限。于是写了一种实现的方式。首先应用是一个二级树,一级表示的是应用分组,二级表示的是…

junit4进行单元测试

一、前言 提供服务的时候,为了保证服务的正确性,有时候需要编写测试类验证其正确性和可用性。以前的做法都是自己简单写一个控制层,然后在控制层里调用服务并测试,这样做虽然能够达到测试的目的,但是太不专业了。还是老…

快速搭建springmvc+spring data jpa工程

一、前言 这里简单讲述一下如何快速使用springmvc和spring data jpa搭建后台开发工程,并提供了一个简单的demo作为参考。 二、创建maven工程 http://www.cnblogs.com/hujunzheng/p/5450255.html 三、配置文件说明 1.application.properties jdbc.drivercom.mysql.jd…

git亲测命令

一、Git新建本地分支与远程分支关联问题 git checkout -b branch_name origin/branch_name 或者 git branch --set-upstream branch_name origin/branch_name 或者 git branch branch_name git branch --set-upstream-toorigin/branch_name branch_name 二、查看本地分支所关…

mysql 7下载安装及问题解决

mysql 7安装及问题解决 一、mysql下载 下载地址:https://www.mysql.com/downloads/Community (GPL) DownloadsMySQL Community Server (GPL)Windows (x86, 64-bit), ZIP ArchiveNo thanks, just start my download.二、mysql安装 解压到指定目录在mysql bin目录下打…

tomcat开发远程调试端口以及利用eclipse进行远程调试

一、tomcat开发远程调试端口 方法1 WIN系统 在catalina.bat里:   SET CATALINA_OPTS-server -Xdebug -Xnoagent -Djava.compilerNONE -Xrunjdwp:transportdt_socket,servery,suspendn,address8899   Linux系统 在catalina.sh里:   CATALINA_OPTS&q…

webpack+react+redux+es6开发模式

一、预备知识 node, npm, react, redux, es6, webpack 二、学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程 redux middleware 详解 Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三、工程搭建 之前有写过 webpackreactes6开发模式…

fiddler发送post请求

1.指定为 post 请求,输入 url Content-Type: application/x-www-form-urlencoded;charsetutf-8 request body中的参数格式:userNameadminicxp&userPassword123qwe!# 这种方式可以用 request.getParameter的方式来获得。 2.指定为 post 请求&#xff…

Kettle之数据抽取、转换、装载

Kettle 官网 ETL利器Kettle实战应用解析系列 利用kettle组件导入excel文件到数据库 kettle中实现动态SQL查询 java中调用kettle转换文件 kettle 7.x版本下载:https://pan.baidu.com/s/1nvnzzCH  密码:6f5c mac 下运行spoon.sh,  windows下为spoon.bat…

webpack+react+redux+es6开发模式---续

一、前言 之前介绍了webpackreactreduxes6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的。假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行。为了更好地管理这些独立的功能节点,我们需要…

RabbitMQ安装和使用(和Spring集成)

一、安装Rabbit MQ   Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装Rabbit MQ的前提是安装Erlang。通过下面两个连接下载安装3.2.3 版本: 下载并安装 Eralng OTP For Windows (vR16B03)运行安装 Rabbit MQ Server Windows Installer (v3.2.3)具体…

单点登录实现(spring session+redis完成session共享)

一、前言 项目中用到的SSO,使用开源框架cas做的。简单的了解了一下cas,并学习了一下 单点登录的原理,有兴趣的同学也可以学习一下,写个demo玩一玩。 二、工程结构 我模拟了 sso的客户端和sso的服务端, sso-core中主要是…

加密策略

一、前言 这两天研究了一下项目中的密码加密,可以说得上是学到了很多。下面来大致说一下。 二、常用加密 1.单向加密算法 单向加密算法主要用来验证数据传输的过程中,是否被篡改过。 BASE64 严格地说,属于编码格式,而非加密算法 …

Spring Data JPA: 实现自定义Repository

一、前言 由于项目中的 实体(entity)默认都是继承一个父类(包含一些公共的属性,比如创建时间,修改时间,是否删除,主键id)。为了实现逻辑删除,一般会自己实现RepositoryFa…

js冲刺一下

js中__proto__和prototype的区别和关系 1.对象有属性__proto__,指向该对象的构造函数的原型对象。  2.方法除了有属性__proto__,还有属性prototype,prototype指向该方法的原型对象。 深入浅出妙用 Javascript 中 apply、call、bind ***两道面试题*** 关于js中伪数…

Jackson序列化实例

参考文章 Jackson使用ContextualSerializer在序列化时获取字段注解的属性 使用BeanSerializerModifier定制jackson的自定义序列化(null值的处理) 关于使用ContextualSerializer的补充 BeanSerializerFactory中有如下代码, 关于设置SerializerModifier,如…

cas4.2.7实现单点登录

准备前参考:  cas server下载地址 cas client 下载地址 安全cookie setSecure详解 Spring通过构造方法注入的四种方式 cas 学习博文 自定义登录页和登录认证 cas server端的login-webflow详细流程 CAS服务端自定义数据库认证用户 准备工作 1. cas server下载之后解…

swagger restful api form映射实体对象和body映射实体对象配置

实体Model ModelAttribute一个具有如下三个作用: ①绑定请求参数到命令对象:放在功能处理方法的入参上时,用于将多个请求参数绑定到一个命令对象,从而简化绑定流程,而且自动暴露为模型数据用于视图页面展示时使用&…

ssh端口转发(之kettle ssh方式连接数据库)

ssh参数解释 格式  ssh [user]host [command] 选项: -1:强制使用ssh协议版本1; -2:强制使用ssh协议版本2; -4:强制使用IPv4地址; -6:强制使用IPv6地址; -A&#xff1a…

ThreadLocal和InheritableThreadLocal使用

InheritableThreadLocal代码 public class InheritableThreadLocal<T> extends ThreadLocal<T> {protected T childValue(T parentValue) {return parentValue;}ThreadLocalMap getMap(Thread t) {return t.inheritableThreadLocals;}void createMap(Thread t, T f…