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 的操做結果。