快捷導(dǎo)航

Cookie跨域問題解決方案代碼示例

更新時(shí)間：2020年11月24日 10:33:53 作者：ノGHJ

這篇文章主要介紹了Cookie跨域問題解決方案代碼示例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

一、前言

　　隨著項(xiàng)目模塊越來越多，很多模塊現(xiàn)在都是獨(dú)立部署。模塊之間的交流有時(shí)可能會(huì)通過cookie來完成。比如說門戶和應(yīng)用，分別部署在不同的機(jī)器或者web容器中，假如用戶登陸之后會(huì)在瀏覽器客戶端寫入cookie（記錄著用戶上下文信息），應(yīng)用想要獲取門戶下的cookie，這就產(chǎn)生了cookie跨域的問題?！　?/p>

二、介紹一下cookiev　　

cookie路徑：

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

　　path表示cookie所在的目錄，asp.net默認(rèn)為/，就是根目錄。在同一個(gè)服務(wù)器上有目錄如下：/test/,/test/cd/,/test/dd/，現(xiàn)設(shè)一個(gè)cookie1的path為/test/，cookie2的path為/test/cd/，那么test下的所有頁面都可以訪問到cookie1，而/test/和/test/dd/的子頁面不能訪問cookie2。這是因?yàn)閏ookie能讓其path路徑下的頁面訪問。

　　讓這個(gè)設(shè)置的cookie 能被其他目錄或者父級(jí)的目錄訪問的方法：

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

　cookie 域：

　　domain表示的是cookie所在的域，默認(rèn)為請(qǐng)求的地址，如網(wǎng)址為www.fzitv.net/test/test.aspx，那么domain默認(rèn)為www.fzitv.net。而跨域訪問，如域A為t1.test.com，域B為t2.test.com，那么在域A生產(chǎn)一個(gè)令域A和域B都能訪問的cookie就要將該cookie的domain設(shè)置為.test.com；如果要在域A生產(chǎn)一個(gè)令域A不能訪問而域B能訪問的cookie就要將該cookie的domain設(shè)置為t2.test.com。

三、解決cookie跨域問題之nginx反向代理

　反向代理概念

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

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

場(chǎng)景模擬　　

兩個(gè)工程web1,web2,部署在同一臺(tái)機(jī)器上的不同tomcat上，請(qǐng)求web1工程的index.html,如下：

然后點(diǎn)擊鏈接請(qǐng)求web2工程的index.jsp,內(nèi)容如下：

再看一下nginx的配置，如下：

worker_processes 2; 
events {
  worker_connections 65535;
}
http {
  include    mime.types;
  default_type application/octet-stream;
 
  log_format main '$remote_addr - $remote_user [$time_local] "$request" '
           '$status $body_bytes_sent "$http_referer" '
           '"$http_user_agent" "$http_x_forwarded_for"';
  server_names_hash_bucket_size 128;
  client_header_buffer_size 32k;
  large_client_header_buffers 4 32k;
  client_body_buffer_size  8m;
  server_tokens off;
  ignore_invalid_headers  on;
  recursive_error_pages  on;
  server_name_in_redirect off;
  sendfile    on;
  tcp_nopush   on;
  tcp_nodelay  on;
  #keepalive_timeout 0;
  keepalive_timeout 65;
  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;
  }
  
  server {
    listen    80;
    server_name 127.0.0.1;
    charset utf-8;
    index index.html;
   
    location /web/web1 {
      proxy_pass http://web1/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 /web/web2 {
      proxy_pass http://web2/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;
    }
 
    location /nginxstatus {
      stub_status on;
      access_log on;
    }
    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }
  }
}

這樣就可以保證cookie在同一域下。web2工程中的index.jsp中的輸出內(nèi)容如下：

v　　

總結(jié)　　

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

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

四、解決cookie跨域問題之jsonp方式請(qǐng)求

　jquery請(qǐng)求跨域：

　　JQuery對(duì)于Ajax的跨域請(qǐng)求有兩類解決方案，不過都是只支持get方式。分別是JQuery的jquery.ajaxjsonp格式和jquery.getScript方式。

　jsonp格式：　　如果獲取的數(shù)據(jù)文件存放在遠(yuǎn)程服務(wù)器上（域名不同，也就是跨域獲取數(shù)據(jù)），則需要使用jsonp類型。使用這種類型的話，會(huì)創(chuàng)建一個(gè)查詢字符串參數(shù) callback=? ，這個(gè)參數(shù)會(huì)加在請(qǐng)求的URL后面。服務(wù)器端應(yīng)當(dāng)在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名，以便完成一個(gè)有效的JSONP請(qǐng)求。意思就是遠(yuǎn)程服務(wù)端需要對(duì)返回的數(shù)據(jù)做下處理，根據(jù)客戶端提交的callback的參數(shù)，返回一個(gè)callback(json)的數(shù)據(jù)，而客戶端將會(huì)用script的方式處理返回?cái)?shù)據(jù)，來對(duì)json數(shù)據(jù)做處理。JQuery.getJSON也同樣支持jsonp的數(shù)據(jù)方式調(diào)用。

場(chǎng)景模擬：

　　兩個(gè)工程web1,web2,部署在本地同一臺(tái)機(jī)器上的不同tomcat上，端口分別是8080和8089。

　　web2/index.html內(nèi)容如下：

　 web2/cooke.jsp內(nèi)容如下：

　　web1/index.html內(nèi)容如下：

　　　　測(cè)試流程，首先通過谷歌瀏覽器訪問http://localhost:8089/web2/index.html，F(xiàn)12，Network視圖，查看內(nèi)容如下：

　　　　或者通過瀏覽器設(shè)置->顯示高級(jí)設(shè)置->隱私設(shè)置來查看寫入的cookie，過程如下。

　接著，打開另一個(gè)窗口，訪問http://localhost:8080/web1/index.html，這個(gè)頁面是請(qǐng)求web2工程寫入的cookie（注意，如果我們不是通過jsonp方式去訪問，那么瀏覽器就會(huì)出現(xiàn) 不允許跨域訪問的提示）。同樣 F12, Network視圖，查看返回的數(shù)據(jù)如下。

　　　　至此，通過jsonp方式的請(qǐng)求完成cookie跨域攜帶，也就是web1工程成功拿到了web2工程目錄下的cookie。可以發(fā)現(xiàn)，jsonp會(huì)通過回調(diào)函數(shù)來處理服務(wù)器端返回的數(shù)據(jù)，因?yàn)榉祷氐目梢詧?zhí)行的js代碼（也就是重寫cookie的path和域），然后自動(dòng)執(zhí)行返回的js代碼，從而達(dá)到目的。

五、解決cookie跨域問題之nodejs superagent

　　package.json中的模塊依賴：