當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

cookie 跨域问题

發布時間：2024/4/30 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 cookie 跨域问题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

cookie 跨域訪問

一、前言

隨著項目模塊越來越多，很多模塊現在都是獨立部署，模塊之間的交流有事可能會通過cookie完成，比如說門戶和應用部署在不同的機器或者web容器中，假如用戶登錄之后會在瀏覽器客戶端寫入cookie （記錄著用戶上下文信息），應用想要回去門戶下的cookie ，這就產生了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路徑下的頁面訪問。

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。

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

反向代理概念

反向代理方式是指以代理服務器來接收Internet上的連接請求，然后將請求轉發給內部網絡上的服務器，并將從服務器上得到的結果返回給Internet上請求連接的客戶端，此時代理服務器對外就表現為一個服務器。

反向代理服務器對于客戶端而言它就像是原始服務器，并且客戶端不需要進行任何特別的設置。客戶端向反向代理的命名空間(name-space)中的內容發送普通請求，接著反向代理將判斷向何處(原始服務器)轉交請求，并將獲得的內容返回給客戶端，就像這些內容原本就是它自己的一樣。

場景模擬

兩個工程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;}

四、解決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的數據方式調用。

場景模擬：

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

web2/index.html內容如下：

web2/cooke.jsp內容如下：

web1/index.html內容如下：

測試流程，首先通過谷歌瀏覽器訪問http://localhost:8089/web2/index.html，F12，Network視圖，查看內容如下：

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

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

至此，通過jsonp方式的請求完成cookie跨域攜帶，也就是web1工程成功拿到了web2工程目錄下的cookie。可以發現，jsonp會通過回調函數來處理服務器端返回的數據，因為返回的可以執行的js代碼（也就是重寫cookie的path和域），然后自動執行返回的js代碼，從而達到目的。

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

package.json中的模塊依賴：

調用superagent api請求：

六、同一域下，不同工程下的cookie攜帶問題

cookie跨域訪問之后，可以成功的寫入本地域。本地的前端工程在請求后端工程時，有很多是ajax請求，ajax默認不支持攜帶cookie，所以現在有以下兩種方案：

使用jsonp格式發送

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

這樣后臺配置就出現了限制，需要配置一個解決跨域訪問的過濾器，而且header字段Access-Control-Allow-Origin的值不能為”*”, 必須是一個確定的域。

總結

以上是生活随笔為你收集整理的cookie 跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。