1. 什么是同源策略

• 同源策略，它是由Netscape提出的一個(gè)著名的安全策略。
  現(xiàn)在所有支持JavaScript 的瀏覽器都會(huì)使用這個(gè)策略。
  所謂同源是指，域名，協(xié)議，端口相同。
  當(dāng)一個(gè)瀏覽器的兩個(gè)tab頁(yè)中分別打開來(lái) 百度和谷歌的頁(yè)面
  當(dāng)瀏覽器的百度tab頁(yè)執(zhí)行一個(gè)腳本的時(shí)候會(huì)檢查這個(gè)腳本是屬于哪個(gè)頁(yè)面的，
  即檢查是否同源，只有和百度同源的腳本才會(huì)被執(zhí)行。
  如果非同源，那么在請(qǐng)求數(shù)據(jù)時(shí)，瀏覽器會(huì)在控制臺(tái)中報(bào)一個(gè)異常，提示拒絕訪問。

2.什么是跨域？跨域有幾種實(shí)現(xiàn)形式

• 跨域是指因同源策略的限制，所以誕生了跨域，指http://a.jrg.com可以向http://b.jrg.com請(qǐng)求數(shù)據(jù)。
• 跨域4種實(shí)現(xiàn)方式：
  • jsonp
    • 通過<script></script>實(shí)現(xiàn)，因?yàn)檫@種方法引用非同源數(shù)據(jù)時(shí)，瀏覽器不阻止
    • 實(shí)現(xiàn)方法是在URL參數(shù)中添加雙方談好的參數(shù)，當(dāng)對(duì)方接收到URL中有該參數(shù)，便將拼裝好的data返回，這時(shí)我們JS代碼中也有這樣的函數(shù)，就會(huì)執(zhí)行
  • 降域
    • 降域是指降低域名來(lái)進(jìn)行跨域，如：
      • http://a.jrg.com和http://b.jrg.com
      • 兩個(gè)頁(yè)面通過document.domain = "jrg,com"
    • 降低域名就可以訪問，這種方法有限制，就是主域要相同
  • cors
    • 瀏覽器發(fā)現(xiàn)這次跨源AJAX請(qǐng)求是簡(jiǎn)單請(qǐng)求，就自動(dòng)在頭信息之中，添加一個(gè)Origin字段。Origin字段用來(lái)說(shuō)明，本次請(qǐng)求來(lái)自哪個(gè)源（協(xié)議 + 域名 + 端口）。服務(wù)器根據(jù)這個(gè)值，決定是否同意這次請(qǐng)求。如果對(duì)方添加了Access-Control-Allow-Origin: *，服務(wù)器會(huì)返回響應(yīng)，瀏覽器請(qǐng)求數(shù)據(jù)
    • 需要注意的是，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為星號(hào)，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。
    • 跨域資源共享 CORS 詳解
  • postMessage
    • 通過postMessage(data,origin) 這個(gè)H5的新API實(shí)現(xiàn)跨域，當(dāng)通過某些動(dòng)作或者事件出發(fā)后，就會(huì)利用window.frames[0].postMessage()發(fā)送數(shù)據(jù)過去<iframe>標(biāo)簽所嵌套的窗口，對(duì)方j(luò)s代碼中如果有監(jiān)聽，則可以進(jìn)行跨域
    • html5 postMessage解決跨域、跨窗口消息傳遞

3.JSONP 的原理是什么

• 通過<script></script>實(shí)現(xiàn)，因?yàn)檫@種方法引用非同源數(shù)據(jù)時(shí)，瀏覽器不阻止
  • 實(shí)現(xiàn)方法是在URL參數(shù)中添加雙方談好的參數(shù)，當(dāng)對(duì)方接收到URL中有該參數(shù)，便將拼裝好的data返回，這時(shí)我們JS代碼中也有這樣的函數(shù)，就會(huì)執(zhí)行，如：

1.png

2.png

4.CORS是什么

• 瀏覽器發(fā)現(xiàn)這次跨源AJAX請(qǐng)求是簡(jiǎn)單請(qǐng)求，就自動(dòng)在頭信息之中，添加一個(gè)Origin字段。Origin字段用來(lái)說(shuō)明，本次請(qǐng)求來(lái)自哪個(gè)源（協(xié)議 + 域名 + 端口）。服務(wù)器根據(jù)這個(gè)值，決定是否同意這次請(qǐng)求。如果對(duì)方添加了Access-Control-Allow-Origin: *，服務(wù)器會(huì)返回響應(yīng)，瀏覽器請(qǐng)求數(shù)據(jù)
  • 需要注意的是，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為星號(hào)，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。

1.png

2.png

5.根據(jù)視頻里的講解演示三種以上跨域的解決方式

• Jsonp & Cors

1.png

2.png

• postMessage

1.png

2.png

• 降域

1.png

2.png

** 跨域處理方式代碼 **