localStorage和cookie的跨域解决⽅案
前⾔
和cookie⼤家都⽤过，我前⾯也有⽂章介绍过，⼤家也都了解，我前⾯也有⽂章详细描述过。但是localStorage和cookie的跨域问题，好多⼩伙伴没有遇到或者不是很清楚，下⾯这篇⽂章，我来简单的聊聊！
业务场景
cookie跨域的业务场景很多，例如：
1、百度www域名下⾯登录了，发现yun域名下⾯也⾃然⽽然登录了。
2、淘宝登录了，发现天猫也登录了，淘宝和天猫是完全不⼀样的2个域名。
cookie跨域
⾸先说说同⼀个主域下⾯的跨域问题，类似www.百度和yun.baiduiframe参数传递
聊到这⾥，必须说⼀说cookie的参数或者属性了。打开⾕歌浏览器，到cookie，如下图：
关于具体每⼀个参数，这⾥就不详细介绍了，不清楚的⼤家可以搜索⼀下，下⾯主要介绍⼀下domain个path
path
cookie ⼀般都是由于⽤户访问页⾯⽽被创建的，可是并不是只有在创建 cookie 的页⾯才可以访问这个cookie。在默认情况下，出于安全⽅⾯的考虑，只有与创建 cookie 的页⾯处于同⼀个⽬录或在创建cookie页⾯的⼦⽬录下的⽹页才可以访问。那么此时如果希望其⽗级或者整个⽹页都能够使⽤cookie，就需要进⾏路径的设置。
path表⽰cookie所在的⽬录，haorooms默认为/，就是根⽬录。在同⼀个服务器上有⽬录如下：
/post/,/post/id/,/tag/,/tag/haorooms/，/tag/id/
现假设⼀个
cookie1的path为/tag/，
cookie2的path为/tag/id/，
那么tag下的所有页⾯都可以访问到cookie1，⽽/tag/和/tag/haorooms/的⼦页⾯不能访问cookie2。这是因为cookie2能让其path路径下的页⾯访问。
让这个设置的cookie 能被其他⽬录或者⽗级的⽬录访问的⽅法：
domain
domain表⽰的是cookie所在的域，默认为请求的地址，
如⽹址为，那么domain默认为www.haorooms。
⽽跨域访问，
如域A为love.haorooms，域B为resource.haorooms，
那么在域A⽣产⼀个令域A和域B都能访问的cookie就要将该cookie的domain设置为.haorooms；
如果要在域A⽣产⼀个令域A不能访问⽽域B能访问的cookie就要将该cookie的domain设置为resource.haorooms。
这样，我们就知道为什么www.百度和yun.baidu共享cookie，我们只需要设置domain为.baidu就可以了【注：点好是必须的】
业务场景中问题2，天猫和淘宝是如何共享cookie的？
cookie跨域解决⽅案⼀般有如下⼏种：
1、nginx反向代理
反向代理（Reverse Proxy）⽅式是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部⽹络上的服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为⼀个服务器。
反向代理服务器对于客户端⽽⾔它就像是原始服务器，并且客户端不需要进⾏任何特别的设置。客户端向反向代理的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容原本就是它⾃⼰的⼀样。
nginx配置如下：
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;
}
    location /web1 {
proxy_pass 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 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;
}
2、jsonp⽅法
其实，淘宝和天猫cookie的传递，应该也是利⽤jsonp来进⾏的，如下图：
打开淘宝⾸页，回向天猫发送⼀个请求。
说⽩了，这个jsonp 的cookie跨域和我们平时⽤的jsonp跨域是⼀样的，关于jsonp跨域，请看
jsonp会通过回调函数来处理服务器端返回的数据，因为返回的可以执⾏的js代码（也就是重写cookie的path和域），然后⾃动执⾏返回的js代码，从⽽达到⽬的。
3、nodejs superagent
package.json中的模块依赖：
调⽤superagent api请求：
其实本质也是jsonp的⽅式。
同⼀域下，不同⼯程下的cookie携带问题
cookie跨域访问之后，可以成功的写⼊本地域。本地的前端⼯程在请求后端⼯程时，有很多是ajax请求，ajax默认不⽀持携带cookie，所以现在有以下两种⽅案：
（1）. 使⽤jsonp格式发送
（2）. ajax请求中加上字段 xhrFields: {withCredentials: true}，这样可以携带上cookie
服务器需要配置：
Access-Control-Allow-Credentials: true
localStorage跨域
可以使⽤和iframe
思路如下：
假设有a.haorooms/text.html和b.haorooms/text.html两个页⾯。
通过a.haorooms/text.html页⾯去修改b.haorooms/text.html页⾯的本地数据：
①　在a.haorooms/text.html页⾯创建⼀个iframe，嵌⼊b.haorooms/text.html页⾯。
②　a.haorooms/text.html页⾯通过postMessage传递指定格式的消息给b.haorooms/text.html页⾯。
③　b.haorooms/text.html页⾯解析a.haorooms/text.html页⾯传递过来的消息内容，调⽤localStorage API 操作本地数据。
④　b.haorooms/text.html页⾯包装localStorage的操作结果，并通过postMessage传递给a.haorooms/text.html页⾯。
⑤　a.haorooms/text.html页⾯解析b.haorooms/text.html页⾯传递回来的消息内容，得到 localStorage 的操作结果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。