本文主要介绍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的值不能是 * ,但必须是一个确定的域。
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。