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

v二、先容一下cookie

v cookie 路径:

jsp页面跨域请求数据库cookie 跨域的问题 React

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的值不能为\"大众\公众, 必须是一个确定的域。