天天看點

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  随着項目子產品越來越多,很多子產品現在都是獨立部署。子產品之間的交流有時可能會通過cookie來完成。比如說門戶和應用,分别部署在不同的機器或者web容器中,假如使用者登陸之後會在浏覽器用戶端寫入cookie(記錄着使用者上下文資訊),應用想要擷取門戶下的cookie,這就産生了cookie跨域的問題。  

  cookie 一般都是由于使用者通路頁面而被建立的,可是并不是隻有在建立 cookie 的頁面才可以通路這個cookie。在預設情況下,出于安全方面的考慮,隻有與建立 cookie 的頁面處于同一個目錄或在建立cookie頁面的子目錄下的網頁才可以通路。那麼此時如果希望其父級或者整個網頁都能夠使用cookie,就需要進行路徑的設定。

  path表示cookie所在的目錄,asp.net預設為/,就是根目錄。在同一個伺服器上有目錄如下:/test/,/test/cd/,/test/dd/,現設一個cookie1的path為/test/,cookie2的path為/test/cd/,那麼test下的所有頁面都可以通路到cookie1,而/test/和/test/dd/的子頁面不能通路cookie2。這是因為cookie能讓其path路徑下的頁面通路。

  讓這個設定的cookie 能被其他目錄或者父級的目錄通路的方法:

  domain表示的是cookie所在的域,預設為請求的位址,如網址為www.jb51.net/test/test.aspx,那麼domain預設為www.jb51.net。而跨域通路,如域A為t1.test.com,域B為t2.test.com,那麼在域A生産一個令域A和域B都能通路的cookie就要将該cookie的domain設定為.test.com;如果要在域A生産一個令域A不能通路而域B能通路的cookie就要将該cookie的domain設定為t2.test.com。

  反向代理(Reverse Proxy)方式是指以代理伺服器來接受Internet上的連接配接請求,然後将請求轉發給内部網絡上的伺服器;并将從伺服器上得到的結果傳回給Internet上請求連接配接的用戶端,此時代理伺服器對外就表現為一個伺服器。

  反向代理伺服器對于用戶端而言它就像是原始伺服器,并且用戶端不需要進行任何特别的設定。用戶端向反向代理 的命名空間(name-space)中的内容發送普通請求,接着反向代理将判斷向何處(原始伺服器)轉交請求,并将獲得的内容傳回給用戶端,就像這些内容 原本就是它自己的一樣。

   兩個工程web1, web2, 部署在同一台機器上的不同tomcat上,請求web1工程的index.html,如下:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  

  然後點選連結請求web2工程的index.jsp, 内容如下:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  再看一下nginx的配置,如下:

 

  這樣就可以保證cookie在同一域下。web2工程中的index.jsp中的輸出内容如下:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  利用nginx的方向代理來解決cookie跨域問題,其實是通過“欺騙”浏覽器來實作的,通過nginx,我們可以将不同工程的cookie放到nginx域下,通過nginx反向代理就可以取到不同工程寫入的cookie。其實上述場景中 $.cookie("user", "hjzgg", {path: "/web"}); 中的path可以寫成 “/”, 這樣nginx的配置就更為簡單了,如下。

  JQuery對于Ajax的跨域請求有兩類解決方案,不過都是隻支援get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

  如果擷取的資料檔案存放在遠端伺服器上(域名不同,也就是跨域擷取資料),則需要使用jsonp類型。使用這種類型的話,會建立一個查詢字元串參數 callback=? ,這個參數會加在請求的URL後面。伺服器端應當在JSON資料前加上回調函數名,以便完成一個有效的JSONP請求。意思就是遠端服務端需要對傳回的資料做下處理,根據用戶端送出的callback的參數,傳回一個callback(json)的資料,而用戶端将會用script的方式處理傳回資料,來對json資料做處理。JQuery.getJSON也同樣支援jsonp的資料方式調用。

  兩個工程web1, web2, 部署在本地同一台機器上的不同tomcat上,端口分别是8080和8089。

  web2/index.html内容如下:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

   web2/cooke.jsp内容如下:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  web1/index.html内容如下:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  測試流程,首先通過谷歌浏覽器通路http://localhost:8089/web2/index.html,F12,Network視圖,檢視内容如下:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  或者通過浏覽器設定->顯示進階設定->隐私設定來檢視寫入的cookie,過程如下。

   

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

    

  接着,打開另一個視窗,通路http://localhost:8080/web1/index.html,這個頁面是請求web2工程寫入的cookie(注意,如果我們不是通過jsonp方式去通路,那麼浏覽器就會出現 不允許跨域通路 的提示)。同樣 F12, Network視圖,檢視傳回的資料如下。

   

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸
解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸
解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸
解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  至此,通過jsonp方式的請求完成cookie跨域攜帶,也就是web1工程成功拿到了web2工程目錄下的cookie。可以發現,jsonp會通過回調函數來處理伺服器端傳回的資料,因為傳回的可以執行的js代碼(也就是重寫cookie的path和域),然後自動執行傳回的js代碼,進而達到目的。

  package.json中的子產品依賴:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  調用superagent api請求:

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

  cookie跨域通路之後,可以成功的寫入本地域。本地的前端工程在請求後端工程時,有很多是ajax請求,ajax預設不支援攜帶cookie,是以現在有以下兩種方案:

        (1). 使用jsonp格式發送

        (2). 

                 ajax請求中加上字段 xhrFields: {withCredentials: true},這樣可以攜帶上cookie

      

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

       這樣背景配置就出現了限制,需要配置一個解決跨域通路的過濾器,而且header字段Access-Control-Allow-Origin的值不能為"*", 必須是一個确定的域。

解決cookie跨域通路  HTTP通路控制(CORS)      JavaScript跨域總結與解決辦法         window.name實作的跨域資料傳輸

繼續閱讀