localStorage和cookie的跨域解决方案

前言

localStorage和cookie你们都用过，我前面也有文章介绍过，跨域你们也都了解，我前面也有文章详细描述过。可是localStorage和cookie的跨域问题，好多小伙伴没有遇到或者不是很清楚，下面这篇文章，我来简单的聊聊！

业务场景

cookie跨域的业务场景不少，例如：

一、百度www域名下面登陆了，发现yun域名下面也天然而然登陆了。

二、淘宝登陆了，发现天猫也登陆了，淘宝和天猫是彻底不同的2个域名。

cookie跨域

首先说说同一个主域下面的跨域问题，相似www.百度 和yun.baidu

聊到这里，必须说一说cookie的参数或者属性了。 打开谷歌浏览器，找到cookie,以下图：

关于具体每个参数，这里就不详细介绍了，不清楚的你们能够搜索一下，下面主要介绍一下domain个path

path

cookie 通常都是因为用户访问页面而被建立的，但是并非只有在建立 cookie 的页面才能够访问这个cookie。在默认状况下，出于安全方面的考虑，只有与建立 cookie 的页面处于同一个目录或在建立cookie页面的子目录下的网页才能够访问。那么此时若是但愿其父级或者整个网页都可以使用cookie，就须要进行路径的设置。

path表示cookie所在的目录，haorooms.com默认为/，就是根目录。 在同一个服务器上有目录以下：

/post/,/post/id/,/tag/,/tag/haorooms/，/tag/id/

现假设一个

cookie1的path为/tag/，

cookie2的path为/tag/id/，

那么tag下的全部页面均可以访问到cookie1，而/tag/和/tag/haorooms/的子页面不能访问cookie2。 这是由于cookie2能让其path路径下的页面访问。

让这个设置的cookie 能被其余目录或者父级的目录访问的方法：

document.cookie = "name = value; path=/";

domain

domain表示的是cookie所在的域，默认为请求的地址，

如网址为 http://www.haorooms.com/post/long_lianjie_websocket ，那么domain默认为www.haorooms.com。

而跨域访问，

如域A为love.haorooms.com，域B为resource.haorooms.com，

那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.haorooms.com；

若是要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为resource.haorooms.com。

这样，咱们就知道为何www.百度 和yun.baidu共享cookie，咱们只须要设置domain为.baidu.com就能够了【注：点好是必须的】

业务场景中问题2，天猫和淘宝是如何共享cookie的？

cookie跨域解决方案通常有以下几种：

一、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 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; }

二、jsonp方法

其实，淘宝和天猫cookie的传递，应该也是利用jsonp来进行的，以下图：

打开淘宝首页，回向天猫发送一个请求。

说白了，这个jsonp 的cookie跨域和咱们平时用的jsonp跨域是同样的，关于jsonp跨域，请看http://www.haorooms.com/post/js_kuayu_service

jsonp会经过回调函数来处理服务器端返回的数据，由于返回的能够执行的js代码（也就是重写cookie的path和域），而后自动执行返回的js代码，从而达到目的。

三、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跨域

可使用postMessage和iframe

思路以下：

假设有a.haorooms.com/text.html和b.haorooms.com/text.html两个页面。

经过a.haorooms.com/text.html页面去修改b.haorooms.com/text.html页面的本地数据：

①　在a.haorooms.com/text.html页面建立一个iframe，嵌入b.haorooms.com/text.html页面。

②　a.haorooms.com/text.html页面经过postMessage传递指定格式的消息给b.haorooms.com/text.html页面。

③　b.haorooms.com/text.html页面解析a.haorooms.com/text.html页面传递过来的消息内容，调用localStorage API 操做本地数据。

④　b.haorooms.com/text.html页面包装localStorage的操做结果，并经过postMessage传递给a.haorooms.com/text.html页面。

⑤　a.haorooms.com/text.html页面解析b.haorooms.com/text.html页面传递回来的消息内容，获得 localStorage 的操做结果。