localStorage和cookie的跨域解決方案

原文轉自：點我

前言

localStorage和cookie大家都用過，我前面也有文章介紹過，跨域大家也都了解，我前面也有文章詳細描述過。但是localStorage和cookie的跨域問題，好多小伙伴沒有遇到或者不是很清楚，下面這篇文章，我來簡單的聊聊！

業務場景

cookie跨域的業務場景很多，例如：

1、百度www域名下面登錄了，發現yun域名下面也自然而然登錄了。

2、淘寶登錄了，發現天貓也登錄了，淘寶和天貓是完全不一樣的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跨域解決方案一般有如下幾種：

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

2、jsonp方法

其實，淘寶和天貓cookie的傳遞，應該也是利用jsonp來進行的，如下圖：

打開淘寶首頁，回向天貓發送一個請求。

說白了，這個jsonp 的cookie跨域和我們平時用的jsonp跨域是一樣的，關於jsonp跨域，請看http://www.haorooms.com/post/js_kuayu_service

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

可以使用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 的操作結果。

思路理清了，關於postMessage,我之前有文章專門介紹，請看文章：http://www.haorooms.com/post/window_postMessage

這里就不多詳細介紹了！