• 為什么兩個網(wǎng)站的IP一樣，也算跨域？

原因同上，因為IP也是可以共用的。

• 為什么可以跨域使用CSS、JS和圖片等？

同源策略限制的是數(shù)據(jù)訪問，我們引用CSS、JS和圖片的時候，其實并不知道其內(nèi)容，我們只是在引用。

CORS跨域

什么是CORS

CORS的全稱是"跨域資源共享"（Cross-origin resource sharing）。 它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

如何理解CORS

如果wang.com和ergou.com這兩個網(wǎng)站都是我的，我就是想讓zhen.com去訪問ergou.com里面的數(shù)據(jù)應(yīng)該怎么辦呢？

只需要wang.com在響應(yīng)頭里寫ergou.com可以訪問即可。這就是CORS。

實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了CORS接口，就可以跨源通信。

兩種請求

CORS跨域分為兩種請求，一種是簡單請求，另外一種就是復(fù)雜請求。

簡單請求

只要滿足以下條件的就是簡單請求：

• 請求方式為HEAD、POST 或者 GET
• http頭信息不超出以下字段：Accept、Accept-Language 、 Content-Language、 Last-Event-ID、 Content-Type(限于三個值：application/x-www-form-urlencoded、multipart/form-data、text/plain)

簡單請求的實現(xiàn)具體來說就是在信息頭中加入一個Origin字段：

GET /cors HTTP/1.1
Origin: http://wang.com
Host: api.ergou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0
...

Origin的作用就是用來說明本次請求來自哪個源，服務(wù)器會根據(jù)Origin的值來判斷是否接受本次請求。

如果Origin所表示的源不被服務(wù)器接受，即瀏覽器發(fā)現(xiàn)回應(yīng)的信息頭中沒有Access-Control-Allow-Origin字段，就會自動拋出一個錯誤。

注意：這種錯誤是無法通過狀態(tài)碼識別的，這也是通過CORS實現(xiàn)跨域請求的一個弊端。

如果Origin所表示的源被服務(wù)器端所接受，那么服務(wù)器就會返回如下響應(yīng)：

Access-Control-Allow-Origin: http://api.ergou.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

• Access-Control-Allow-Origin :該字段是必須的。它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求
• Access-Control-Allow-Credentials: 該字段可選。它的值是一個布爾值，表示是否允許發(fā)送Cookie。默認情況下，Cookie不包括在CORS請求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請求中，一起發(fā)給服務(wù)器。這個值也只能設(shè)為true，如果服務(wù)器不要瀏覽器發(fā)送Cookie，刪除該字段即可。(注意：如果要發(fā)送cookie，不僅要進行上述的設(shè)置，還要在AJAX請求中設(shè)置withCredentials屬性）
• Access-Control-Expose-Headers:該字段可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。

復(fù)雜請求

所謂復(fù)雜請求，即不滿足上述條件的請求就是復(fù)雜請求。

比如請求的方法是PUT或DELETE，或者Content-Type字段的類型是application/json。

復(fù)雜請求首先會發(fā)起一個預(yù)檢請求，該請求是 option 方法的，通過該請求來知道服務(wù)端是否允許跨域請求。

var url = 'http://api.wang.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

上面的請求就是一個復(fù)雜請求，當(dāng)瀏覽器發(fā)現(xiàn)這是一個復(fù)雜請求之后，就會主動發(fā)出一個預(yù)檢請求，詢問服務(wù)器是否允許本次請求。

服務(wù)器收到預(yù)檢請求之后，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，確認允許跨源請求，才會做出相應(yīng)的回應(yīng)。

Access-Control-Allow-Origin: http://api.wang.com
Content-Type: text/html; charset=utf-8

CORS存在的問題

不支持IE8/9，如果要在IE8/9使用CORS跨域需要使用XDomainRequest對象來支持CORS。

解決方法二：JSONP

什么是JSONP

我們在跨域的時候由于當(dāng)前的瀏覽器不支持 CORS 或者因為某些條件不支持 CORS，我們必須使用另外一種方式來跨域，于是我們就請求一個 JS 文件，這個 JS 文件會執(zhí)行一個回調(diào)，回調(diào)里面就有我們需要的數(shù)據(jù)。

let script = document.createElement('script');

script.src = 'http://www.wang.cn/login?username=wang&callback=callback';

document.body.appendChild(script);

function callback(res) {
  console.log(res);
}

回調(diào)函數(shù)的名字是什么？

回調(diào)的名字是可以隨機生成的的一個隨機數(shù)，我們把這個名字當(dāng)成 callback 的參數(shù)傳給后臺，后臺會把這個函數(shù)再次返回給我們并執(zhí)行

JSONP跨域優(yōu)點

• 兼容ie
• 可以跨域

JSONP跨域缺點

• 由于是 script 標(biāo)簽，所以讀不到 ajax 那么精確的狀態(tài)，不知道狀態(tài)碼是什么，也不知道響應(yīng)頭是什么，它只知道成功和失敗。
• 不支持post（因為是 script 標(biāo)簽，所以只支持 get 請求）

告誡自己，即使再累也不要忘記學(xué)習(xí)，成功沒有捷徑可走，只有一步接著一步走下去。 共勉！

文章中如有不對的地方，歡迎小伙伴們多多指正。

謝謝大家~ ??