web跨域及cookie相關知識總結

  以前對於跨域相關的知識一致都很零碎，正好如今的代碼中用到了跨域相關的，如今來對這些知識作一個彙總整理，方便本身查看，說不定也可能對你有所幫助。

本篇主要內容以下：

• 瀏覽器同源策略
• http 請求跨域
• http 請求跨域解決辦法
• cookie 機制
• 如何共享 cookie

瀏覽器同源策略

  相信不少人在 web 入門時，都被跨域問題折磨的死去活來。要想徹底掌握跨域就得知道爲何會有跨域這個問題出現。

  簡單來講跨域問題是由於瀏覽器的同源策略致使的。那瀏覽器爲何要有同源策略呢？

  固然是爲了安全。沒有同源策略限制的瀏覽器環境是很是危險的（即便有了同源策略也不是百分百安全），有興趣的能夠去了解了解CSRF和XSS攻擊。

  所謂的「同源」指的是「三個相同」：

• 協議相同。不能一個是 http 協議，一個是 https
• 域名相同
• 端口相同

<!-- more -->

若是非同源頁面有如下限制：

• LocalStore 和 IndexDB 沒法讀取。這兩個顯然是不能讀取的，可是 cookie 有點不同，放在後面單獨說明
• DOM 沒法獲取,好比如法在頁面 A 中經過 iframe 獲取異源頁面 B 的 DOM
• AJAX 請求沒法讀取（能夠發送請求，可是沒法讀取到請求結果。好比在頁面 A 中請求異源接口 B，請求會正常發出處理，可是在頁面 A 中沒法獲取請求結果，除非響應頭 Access-Control-Allow-Headers 中容許了頁面 A 的源，這樣就能讀取到結果）

  可是這裏有個例外，全部帶「src」屬性的標籤均可以跨域加載資源，不受同源策略的限制，這樣你應該能夠想到一個比較古老的跨域解決方案（JSONP）,同時這個特性也會被用做 CSRF 攻擊。

http 請求跨域

  在前端開發中常常會遇到跨域的問題，好比先後端分離中先後端部署在不一樣的端口上，或者在前端頁面中須要向另一個服務請求數據，這些都會被跨域所阻擋。

目前主要有如下幾種辦法解決跨域問題：

1. 關閉瀏覽器同源檢查

  這個太暴力，也太不安全了，不用考慮。

1. jsonp 實現跨域請求

  前面說過了瀏覽器對於帶 src 屬性的標籤均可以跨域的。所以 jsonp 的實現流失利用了這個特性，在頁面中動態插入一個<script>標籤,而後他的 src 屬性就是接口調用地址，這樣就能訪問過去了，而後再講返回內容特殊處理成當即執行的函數，這樣就看起像進行了一次跨域請求。之因此不推薦這種方式，主要有如下兩個緣由：

• 實現複雜,且須要先後臺同時修改才能實現
• 只能進行 get 請求

1. 服務器設置運行跨域

  這種方法只須要後臺作處理便能實現跨域，前面說的 http 跨域請求是可以發出去的，只是不能接收，那咱們只要在響應頭Access-Control-Allow-Headers中加入容許請求的地址便可，以,分隔，同時*表明全部地址都容許。好比：

Access-Control-Allow-Headers:http://localhost:8081,http://localhost:8082

本方法是較爲經常使用的一中跨域辦法,只需簡單修改服務端代碼便可。

1. 請求代理

  這也是很是經常使用的一種跨域方法。跨域限制只是瀏覽器限制，服務端並無這個概念，所以咱們在前端仍是請求同域地址，而後在服務端作一個代理，將請求轉發到真正的 ip 和端口上。一般使用 nginx 實現端口轉發，好比下面一段 nginx 配置：

server {
    # /test1/abc 轉發到 http://a.com:8011/abc
    location /test1/ {
        proxy_pass http://a.com:8011/;
    }

    # /test2/abc 轉發到 http://b.com:8011/main/abc
    location /test2/ {
        proxy_pass http://b.com:8011/main/;
    }

    # /test3/abc 轉發到 http://c.com:8011/test3/abc
    location /test3/ {
        proxy_pass http://c.com:8081;
    }
}

cookie 同源策略

  cookie 的同源策略是經過 Domain和path兩個部分來共同確認一個 cookie 在哪些頁面上可用。

  Domain肯定這個 cookie 所屬的域名，不能帶端口或協議。所以 cookie 即可在不一樣端口/不一樣協議下共享,只要域名相同。有一個例外是父子域名間也能共享 cookie，只需將 Domain 設置爲.父域名。

  path就簡單多了，經過 Domain 肯定哪些域名能夠共享 cookie，而後在經過path來肯定 cookie 在哪些路徑下可用。使用/表示全部路徑均可共享。

具體以下：

• Domain : example,path : /a可獲取 cookie:http://example:8081/a,https://example:8081/a
• Domain : example,path : /可獲取 cookie:http://example:8081/a,https://example:8081/a , http://example:12/abcd
• Domain : .example,path : /a可獲取 cookie:http://example:8081/a , https://localhost:8081/a , http://test.example:889/a

注意:在跨域請求中，即時目標地址有 cookie 且發起請求的頁面也能讀取到該 cookie，瀏覽器也不會將 cookie 自動設置到該跨域請求中。好比在http://localhost:8082/a頁面中請求http://localhost:8081/abc,這兩個地址下擁有共享cookie，http請求也不會攜帶cookie。

本篇原創發佈於：FleyX 的我的博客

原文出處：https://www.cnblogs.com/wuyoucao/p/11075435.html