什么是跨域？

跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制。

什么是同源策略？

• 同源定義
  源=協(xié)議+域名+端口號（window.origin或location.origin可以得到當(dāng)前源）
  同源：如果兩個url的協(xié)議、域名、端口號完全一致，那么這兩個url就是同源的。
  例如：

https://qq.com
https://www.qq.com

這兩者就不是同源的，完全一致的才算同源。

• 同源策略（不同源的頁面之間，不準(zhǔn)互相訪問數(shù)據(jù)）
  瀏覽器規(guī)定如果JS運(yùn)行在源A里，那么就只能獲取源A的數(shù)據(jù)，不能獲取源B的數(shù)據(jù)，即不允許跨域。
  例如（此處省略http協(xié)議）：假設(shè)frank.com/index.html引用了cdn.com/1.js,則可以說1.js運(yùn)行在源frank.com里（注意這跟cdn.com沒有關(guān)系，雖然1.js從它那里下載）所以可以看出來1.js就只能獲取frank.com的數(shù)據(jù)，不能獲取1.frank.com的數(shù)據(jù)。

• 這么做的目的是什么？
  為了保護(hù)用戶隱私。

怎么跨域？

• 問題根源
  1、瀏覽器默認(rèn)不同源之間不能互相訪問數(shù)據(jù)
  2、但是qq.com和frank.com其實(shí)都是自己的網(wǎng)站
  3、我想讓兩個網(wǎng)站互相訪問，瀏覽器為什么要組織

解法一 用CORS

如果要共享數(shù)據(jù)，需要提前聲明，如何聲明呢？
具體語法

Access-Control-Allow-Origin:(允許訪問的網(wǎng)址)

詳情參考：(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)

解法二 JSONP

（主要是用來兼容IE的）
客戶端在 HTML 中動態(tài)生成 script 標(biāo)簽，在 “src” 中引入請求的 URL + 回調(diào)函數(shù)，這樣請求服務(wù)器返回的數(shù)據(jù)會交由回調(diào)函數(shù)處理，這樣就實(shí)現(xiàn)了跨域讀請求；服務(wù)端在接收到客戶端請求后，首先取得客戶端要回調(diào)的函數(shù)名，再生成 JavaScript 代碼段返回給瀏覽器，瀏覽器在獲取到返回結(jié)果后直接調(diào)用回調(diào)函數(shù)完成任務(wù)。

• 例如frank.com訪問qq.com
  1、qq.com將數(shù)據(jù)寫到/frank.js
  2、frank.com用script標(biāo)簽引用/frank.js
  3、/frank.js執(zhí)行，執(zhí)行什么呢？
  4、frank.com事先定義好window.xxx函數(shù)
  5、/frank.js執(zhí)行window.xxx({frinds:[....]})
  6、然后frank.com就通過window.xxx獲取到數(shù)據(jù)了
  （window.xxx就是一個回調(diào)）

擴(kuò)展

為什么可以跨域使用CSS、JS和圖片等？
同源策略限制的是數(shù)據(jù)訪問，我們引用CSS、JS和圖片的時候，其實(shí)并不知道其內(nèi)容，我們只是在引用。（如果可以跨域使用的話那你知道CSS的第一個字符是什么嗎？）