解决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…

dubbo服务提供与消费

一、前言 项目中用到了Dubbo,临时抱大腿,学习了dubbo的简单实用方法。现在就来总结一下dubbo如何提供服务,如何消费服务,并做了一个简单的demo作为参考。 二、Dubbo是什么 Dubbo是一个分布式服务框架,致力于提供高性能…

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目录下打…

RestTemplate发送请求并携带header信息

1、使用restTemplate的postForObject方法 注&#xff1a;目前没有发现发送携带header信息的getForObject方法。 HttpHeaders headers new HttpHeaders(); Enumeration<String> headerNames request.getHeaderNames(); while (headerNames.hasMoreElements()) {String k…

工作中常用到的命令

linux zip 和 unzip http://blog.csdn.net/shenyunsese/article/details/17556089 linux 查看日志 http://blog.chinaunix.net/uid-15463753-id-2943532.html linux 删除 http://www.jb51.net/LINUXjishu/179430.html linux查看末尾日志&#xff08;tail -f&#xff09; http:/…

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

一、tomcat开发远程调试端口 方法1 WIN系统 在catalina.bat里&#xff1a;   SET CATALINA_OPTS-server -Xdebug -Xnoagent -Djava.compilerNONE -Xrunjdwp:transportdt_socket,servery,suspendn,address8899   Linux系统 在catalina.sh里&#xff1a;   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 请求&#xff0c;输入 url Content-Type: application/x-www-form-urlencoded;charsetutf-8 request body中的参数格式&#xff1a;userNameadminicxp&userPassword123qwe!# 这种方式可以用 request.getParameter的方式来获得。 2.指定为 post 请求&#xff…

基于spring注解AOP的异常处理

一、前言 项目刚刚开发的时候&#xff0c;并没有做好充足的准备。开发到一定程度的时候才会想到还有一些问题没有解决。就比如今天我要说的一个问题&#xff1a;异常的处理。写程序的时候一般都会通过try...catch...finally对异常进行处理&#xff0c;但是我们真的能在写程序的…

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

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

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

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

JdbcTemplate使用小结

org.springframework.jdbc.core.JdbcTemplate.query(String sql, Object[] args, RowMapper<StaffUnionVO> rowMapper) throws DataAccessException 1.自定义rowMapper public class StaffUnionVO implements RowMapper<StaffUnionVO>, Serializable {private stat…

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

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

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

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

maven deploy上传私服出错

error 内容如下 Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:2.5: deploy (default-deploy) on project XXX pom文件增加如下配置 <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifa…

加密策略

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

Spring Data JPA: 实现自定义Repository

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