解決cookie跨域訪問

時間 2020-09-26

標籤解決 cookie 訪問欄目 HTML 简体版

原文原文鏈接

1、前言

　　隨着項目模塊愈來愈多，不少模塊如今都是獨立部署。模塊之間的交流有時可能會經過cookie來完成。好比說門戶和應用，分別部署在不一樣的機器或者web容器中，假如用戶登錄以後會在瀏覽器客戶端寫入cookie（記錄着用戶上下文信息），應用想要獲取門戶下的cookie，這就產生了cookie跨域的問題。　　html

2、介紹一下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路徑下的頁面訪問。node

　　讓這個設置的cookie 能被其餘目錄或者父級的目錄訪問的方法：jquery

　document.cookie = "name = value; 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。nginx

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

　　反向代理概念

　　反向代理（Reverse Proxy）方式是指以代理服務器來接受Internet上的鏈接請求，而後將請求轉發給內部網絡上的服務器；並將從服務器上獲得的結果返回給Internet上請求鏈接的客戶端，此時代理服務器對外就表現爲一個服務器。web

　　反向代理服務器對於客戶端而言它就像是原始服務器，而且客戶端不須要進行任何特別的設置。客戶端向反向代理的命名空間(name-space)中的內容發送普通請求，接着反向代理將判斷向何處(原始服務器)轉交請求，並將得到的內容返回給客戶端，就像這些內容本來就是它本身的同樣。ajax

　　場景模擬

　　兩個工程web1, web2, 部署在同一臺機器上的不一樣tomcat上，請求web1工程的index.html,以下：

　　而後點擊連接請求web2工程的index.jsp, 內容以下：

　　再看一下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中的輸出內容以下：

　　總結

　　利用nginx的方向代理來解決cookie跨域問題，實際上是經過「欺騙」瀏覽器來實現的，經過nginx，咱們能夠將不一樣工程的cookie放到nginx域下，經過nginx反向代理就能夠取到不一樣工程寫入的cookie。其實上述場景中 $.cookie("user", "hjzgg", {path: "/web"}); 中的path能夠寫成「/」，這樣nginx的配置就更爲簡單了，以下。

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

4、解決cookie跨域問題之jsonp方式請求

　　jquery請求跨域：

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

　　jsonp格式：

　　若是獲取的數據文件存放在遠程服務器上（域名不一樣，也就是跨域獲取數據），則須要使用jsonp類型。使用這種類型的話，會建立一個查詢字符串參數 callback=? ，這個參數會加在請求的URL後面。服務器端應當在JSON數據前加上回調函數名，以便完成一個有效的JSONP請求。意思就是遠程服務端須要對返回的數據作下處理，根據客戶端提交的callback的參數，返回一個callback(json)的數據，而客戶端將會用script的方式處理返回數據，來對json數據作處理。JQuery.getJSON也一樣支持jsonp的數據方式調用。