js cookie解决跨域问题,允许cookie的跨域设置

js cookie解决跨域问题,允许cookie的跨域设置,Cookie跨域问题解决方案代码示例

本文主要介绍Cookie跨域问题解决方案的代码示例,在本文中非常详细。对大家的学习或者工作都有一定的参考价值,有需要的朋友可以参考一下。

一、前言

随着项目模块越来越多,现在很多模块都是独立部署的。模块之间的通信有时可以通过cookie来完成。例如,门户和应用程序分别部署在不同的机器或web容器中。如果用户登录并在浏览器客户端写了一个cookie(记录了用户的上下文信息),而应用又想获取门户下的cookie,这就导致了cookie跨域的问题。

二、介绍一下cookiev 

Cookie路径:

一般来说,cookie是由访问页面的用户创建的,但并不是只有创建cookie的页面才能访问这个cookie。默认情况下,出于安全原因,只能访问与创建cookie的页面位于同一目录或位于创建cookie的页面的子目录中的网页。这时,如果你想让父网页或者整个网页都能够使用cookie,就需要设置路径。

指示路径cookie所在的目录。默认的ASP.NET是/,它是根目录。在同一个服务器上,有如下目录:/test/、/test/cd/、/test/dd/。现在,cookie1的路径是/test/,cookie2的路径是/test/cd/,所以所有被测页面都可以访问cookie1,但是/test/和/test/dd/的子页不能访问cookie2。这是因为cookie可以使其路径path下的页面可访问。

如何使其他目录或父目录可以访问该cookie集:

document.cookie= name=valuepath=/;

Cookie域:

域是指cookie所在的域,默认为请求的地址。例如,如果URL是www.jb51.net/test/test.aspx,则域默认为www.jb51.net。以及跨域访问,比如A域是t1test.com;并且域B是t2.test.com,那么要在域A中生成一个域A和域B都可以访问的cookie,cookie的域应该设置为. test.com如果您想在域A中生成一个域A不能访问但域B可以访问的cookie,您应该将cookie的域设置为t2.test.com。

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

反向代理概念

反向代理是指代理服务器在互联网上接受连接请求,然后将请求转发给内部网络上的服务器;并将从服务器获得的结果返回给请求互联网连接的客户机,此时代理服务器对外界表现为服务器。

反向代理服务器对于客户端来说就像原服务器一样,客户端不需要任何特殊的设置。向客户端反向代理的名称空间中的内容发送一个公共请求,然后反向代理将确定将请求转发到哪里(原始服务器),并将获得的内容返回给客户端,就像它是自己的一样。

场景模拟

web1和Web2两个项目部署在同一台机器上的不同tomcat上,Web1项目的index.html请求如下:

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

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

工作进程2;

事件{

工人_连接65535;

}

http {

包括mime.types

default_type应用程序/八位字节流;

log _ format main $ remote _ addr-$ remote _ user[$ time _ local] $ request

$ status $ body _ bytes _ sent $ http _ referer

“$ http _ user _ agent”“$ http _ x _ forwarded _ for”;

服务器名称哈希桶大小128;

client _ header _ buffer _ size 32k

large _ client _ header _ buffers 4 32k;

client _ body _ buffer _ size 8m

server_tokens关闭;

ignore _ invalid _ headers on

recursive _ error _ pages on

server _ name _ in _ redirect off

在上发送文件;

tcp _ nopush on

tcp_nodelay打开;

# keepalive _ time out 0;

keepalive _ timeout 65

上游网站1{

服务器127 . 0 . 0 . 1:8089 max _ fails=0 weight=1;

}

上游网站2 {

服务器127 . 0 . 0 . 1:8080 max _ fails=0 weight=1;

}

服务器{

听80;

server _ name 127 . 0 . 0 . 1;

字符集utf-8;

索引index.html;

位置/web/web1 {

proxy _ pass http://web 1/web 1;

proxy_set_header主机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

}

位置/web/web2 {

proxy _ pass http://web 2/web 2;

proxy_set_header主机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

}

位置/nginxstatus {

stub _ status on

access _ log on

}

error _ page 500 502 503 504/50x . html;

location=/50x.html {

根html

}

}

}

这确保了cookie在同一个域中。2 index.jsp在web2工程中的产量如下:

v

摘要

利用nginx的定向代理来解决cookies的跨域问题,实际上是通过“欺骗”浏览器来实现的。通过nginx,我们可以把不同项目的cookie放在nginx的域下,通过nginx的反向代理,我们可以得到不同项目写的cookie。实际上,美元。上述场景中的cookie (user , hjzgg ,{ path:/web });Path in可以写成“/”,这样使得nginx的配置更简单,如下。

位置/网站1 {

proxy _ pass http://web1

proxy_set_header主机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

}

位置/网站2 {

proxy _ pass http://web2

proxy_set_header主机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

}

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

Jquery跨域请求:

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

Jsonp格式:如果采集的数据文件存储在远程服务器上(不同域名,即跨域数据采集),需要使用jsonp类型。如果使用这种类型,查询字符串参数callback=?此参数将被追加到请求的URL。服务器应该用回调函数名作为JSON数据的前缀,以完成一个有效的JSONP请求。是指远程服务器需要对返回的数据进行处理,根据客户端提交的回调的参数返回一个回调(json)数据,客户端会将返回的数据以脚本的形式进行处理来处理json数据。JQuery.getJSON也支持jsonp的数据模式调用。

场景模拟:

Web1和Web2两个项目部署在同一台本地机器上的不同tomcat上,它们的端口分别是8080和8089。

2/index.html内容如下:

web2/cooke.jsp内容如下:

web1/index.html的内容如下:

测试过程,先访问http://localhost:8089/web 2/index . html,F12,通过Google浏览器进行网络查看,检查内容如下:

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

然后,打开另一个窗口,访问http://localhost:8080/web 1/index . html,这个页面就是请求web2项目写入的cookie(注意,如果我们不通过jsonp访问,浏览器会提示不允许跨域访问)。类似地,F12,网络视图,如下检查返回的数据。

至此,cookies的跨域携带通过jsonp的请求完成,即web1项目成功从web2项目目录中获取cookies。可以发现,jsonp会通过回调函数处理服务器返回的数据,因为返回的可执行js代码(即cookie的路径和域被重写),然后自动执行返回的js代码,从而达到目的。

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

package.json中的模块依赖于:

调用superagent api请求:

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

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

(1).使用jsonp格式发送。

(2)将字段xhrfields:{ with credentials:true }添加到2)中。ajax请求,这样就可以携带cookie了。

因此,后台配置受到限制,并且需要配置用于跨域访问的过滤器。此外,头字段Access-Control-Allow-Origin的值不能是 * ,但必须是一个确定的域。

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

js cookie解决跨域问题,允许cookie的跨域设置