cookie跨域

業(yè)務(wù)場景

場景1： 同一個主域下邊的跨域問題

• 百度www域名下邊登錄了，發(fā)現(xiàn)yun域名下面也自然的登錄了

path

cookie一般都是用于用戶訪問頁面而被創(chuàng)建的，但是==并不是只有在創(chuàng)建cookie的頁面才可以訪問這個cookie== 在默認(rèn)情況下，處于安全方面的考慮，只有與創(chuàng)建cookie的頁面處于同一個目錄或者在創(chuàng)建cookie頁面的子目錄下的網(wǎng)頁才可以訪問。如果希望其父級或者整個網(wǎng)頁都能使用cookie就需要進(jìn)行路徑的設(shè)置。

path表示cookie所在的目錄，haorooms.com默認(rèn)為/,就是根目錄。在同一個服務(wù)器上有目錄如下

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

現(xiàn)在假設(shè)
cookie1的path為/tag/,
cookie2的path為/tag/id/,
那么tag下的所有頁面都可以訪問到cookie1，而/tag/和/tag/haorooms/的子頁面不能訪問cookie2，因為cookie2能讓其path路徑下的頁面進(jìn)行訪問。
讓這個設(shè)置的cookie能被其他目錄或者父級的目錄訪問的方法

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

domain

domain表示的是cookie所在的域，默認(rèn)是請求的地址

如網(wǎng)址為 http://www.haorooms.com/post/long_lianjie_websocket ，那么domain默認(rèn)為www.haorooms.com。

而跨域訪問，

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

那么在域A生產(chǎn)一個令域A和域B都能訪問的cookie就要將該cookie的domain設(shè)置為.haorooms.com；

如果要在域A生產(chǎn)一個令域A不能訪問而域B能訪問的cookie就要將該cookie的domain設(shè)置為resource.haorooms.com。

這樣，我們就知道為什么www.百度 和yun.baidu共享cookie，我們只需要設(shè)置domain為.baidu.com就可以了【注：點(diǎn)是必須的】

場景2：

淘寶登錄了，發(fā)現(xiàn)天貓也登錄了，淘寶和天貓是完全不一樣的兩個域名

cookie跨域解決方案一般有如下幾種：

1、nginx反向代理

反向代理（Reverse Proxy）方式是指以代理服務(wù)器來接受Internet上的連接請求，然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器；并將從服務(wù)器上得到的結(jié)果返回給Internet上請求連接的客戶端，此時代理服務(wù)器對外就表現(xiàn)為一個服務(wù)器。

反向代理服務(wù)器對于客戶端而言它就像是原始服務(wù)器，并且客戶端不需要進(jìn)行任何特別的設(shè)置?？蛻舳讼蚍聪虼?的命名空間(name-space)中的內(nèi)容發(fā)送普通請求，接著反向代理將判斷向何處(原始服務(wù)器)轉(zhuǎn)交請求，并將獲得的內(nèi)容返回給客戶端，就像這些內(nèi)容 原本就是它自己的一樣。

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的傳遞，應(yīng)該也是利用jsonp來進(jìn)行的，如下圖：

image.png

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

說白了，這個jsonp 的cookie跨域和我們平時用的jsonp跨域是一樣的，關(guān)于jsonp跨域，請看 瀏覽器跨域解決方案

jsonp會通過回調(diào)函數(shù)來處理服務(wù)器端返回的數(shù)據(jù)，因為返回的可以執(zhí)行的js代碼（也就是重寫cookie的path和域），然后自動執(zhí)行返回的js代碼，從而達(dá)到目的。

localstorage跨域

使用postMessage和iframe

假設(shè)有a.haorooms.com/text.html和b.haorooms.com/text.html兩個頁面。

通過a.haorooms.com/text.html頁面去修改b.haorooms.com/text.html頁面的本地數(shù)據(jù)：

1. 在a.haorooms.com/text.html頁面創(chuàng)建一個iframe，嵌入b.haorooms.com/text.html頁面。
2. a.haorooms.com/text.html頁面通過postMessage傳遞指定格式的消息給b.haorooms.com/text.html頁面。
3. b.haorooms.com/text.html頁面解析a.haorooms.com/text.html頁面?zhèn)鬟f過來的消息內(nèi)容，調(diào)用localStorage API 操作本地數(shù)據(jù)。
4. b.haorooms.com/text.html頁面包裝localStorage的操作結(jié)果，并通過postMessage傳遞給a.haorooms.com/text.html頁面。
5. a.haorooms.com/text.html頁面解析b.haorooms.com/text.html頁面?zhèn)鬟f回來的消息內(nèi)容，得到 localStorage 的操作結(jié)果。

原文鏈接