跨域的原理了解及解決辦法

ps: 如果有任何問題可以評論留言，我看到後會及時解答，評論或關注，您的鼓勵是我分享的最大動力

轉載請注明出處：https://blog.csdn.net/qq_40938301/article/details/100882672

一、同源政策

早期的浏覽器廠商，出于安全性問題的考慮，提出了同源政策的概念，即：

Web浏覽器隻有在同源（域）的時候，才可以讓一個網頁的腳本（script）通路另一個網頁的資料。

而同源指的是（協定+域名+端口）三者都要相同的url

eg：協定 http 、 https

    域名 www.abc.com  blog.abc.com

    端口 http://www.abc.com:8080 http://www.abc.com:80
           

ps：安全性問題例如，你在一個銀行網頁輸入了賬号密碼，這些資訊儲存在了 session 、cookie 中，如果沒有同源政策，

二、為什麼要跨域

由于同源政策的限制，

XHR 1.0

(XMLHttpRequests) 不能對非目前域的網頁發起 ajax 請求.

但是對于一個公司有多個子域 或者 調用不同域的api 也有了限制

是以需要想辦法跨域

三、跨域的解決辦法

1、document.domain屬性

通過JS将兩個頁面中的document.domain屬性設定為相同的基礎主域 eg：abc.com,

進而實作同域.

2、跨域資源共享（CORS）

服務端通過設定 

Access-Control-Allow-Origin 

辨別哪些站點可以請求檔案，

或者設定 

Access-Control-Allow-Origin 

為"*" 允許任意站點請求檔案

3、postMessage

4、jsonp

html 中的一些标簽 如 <img> <script> 中的 src 是被允許跨域的

是以有人利用上述的特點，研究出了jsonp 這種方法

（src 中請求類似于網址 url 的請求 是 get 請求方式的）

假設JSONP請求如下：

jsonp({
    url: 'http://path/to/server/b',
    params: {A: a, B: b},
    success: function myCallback (response) {}
})
           

背後其實在進行：

1. (1) 拼接一個script标簽，

   <script src="http://path/to/server/b?A=a&B=b&callbackFunctionName=myCallback"></script>

   ，進而觸發對指定位址的GET請求
2. (2) 伺服器端對這個GET請求進行處理，并傳回字元串 "myCallback('response value')"
3. (3) 前端script加載完之後，其實就是在script中執行

   myCallback('response value')

5、nginx 反向代理跨域

設定一個 nginx 作為代理伺服器，頁面所有請求被 nginx 代理伺服器監聽，

相當于頁面向 nginx 發送請求，

而 nginx 将該請求轉發到真實請求的目标伺服器上

但是實際上請求的域 都是 nginx 伺服器的域名

隻要 請求頁面 和 nginx 伺服器的域名同源 就行了