項目中出現多個域名下的Cookie

　　前言：我們在查看一個項目的Cookie時，有時會看到多個域名下的Cookie，如下圖：

　　

　　

　　其中一種常見的原因是：因為我們在項目中引用了另一個項目的資源。如下圖：

　　

 

 　　重點：瀏覽器的一種默認機制：如果我們引用了另一個項目的資源，那么該項目域下的Cookie對本項目可見；但是雖然可見，但依然，不可跨域訪問和設置Cookie。

 

　　那么我們如何去模仿一下這個效果呢？ 

　　實驗方案一：根據默認機制，我們需要2個項目，A和B，在A里建一個可以創建A對應域名：a.com的Cookie的JS：test.js，在B項目里添加A項目的資源：

　　1-項目A-test.js：

alert(1);
$(function () {
    alert(2);
    $.cookie('the12345555', 'value123', { expires: 7, domain: 'a.com', path: '/' });
});

　　2-項目B-common.js添加A項目資源：

var script = document.createElement('script');
script.src = "https://mstyle1.tbdress.com/script/usercenter/test.js";
script.type = "text/javascript";
script.async = true;
document.head.appendChild(script);

 

　　最后訪問B項目測試效果：我們可能會遇到瀏覽器的提示：blocked devtools   或者   request may be blocked    請參考解決訪問：https://community.akamai.com/customers/s/article/Blocking-Requests-Other-Hidden-Chrome-Developer-Tools?language=en_US

　　也可以在谷歌瀏覽器打開開發者工具F12,在按F1打開設置頁面如下，大家試試效果吧：

　　

 

　　測試結果：有彈框，但是cookie設置失敗！  但是我們看到了a項目下的cookie，只是沒有添加新的cookie成功。   這是因為新的cookie創建的方式是靠B引用A，在B里執行了域名在A下的Cookie，屬於跨域設置Cookie，最后的結果必然就失敗了。

　　

　　根據上面失敗的原因改進實驗：

　　實驗方案二：我們需要2個項目，A和B，在A里建一個可以創建A對應域名：a.com的Cookie的JS：test.js，在A項目里引用test.js（讓創建方法執行在A項目中），在B項目里添加A項目的資源test.js，其實可以是任一資源，不一定在引用test.js，即使引用了，也會跨域設置失敗，真正成功的還是靠A項目自己執行的效果。   思路就是這樣了，大家自己測試哈。

 

　　實驗方案三：我們需要2個項目，A和B，  B隨便引用A的一資源，同時B發起一個異步請求到A中，讓A在程序中創建A的Cookie，由於B引用了A的資源，那么A自己創建的Cookie對B可見。      自己實現哈。