跨域資源共享 CORS

對於web開發來講，由於瀏覽器的同源策略，我們需要經常使用一些hack的方法去跨域獲取資源，但是hack的方法總歸是hack。

直到W3C出了一個標準－CORS－"跨域資源共享"（Cross-origin resource sharing）。

它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

首先來說 CORS 需要瀏覽器和服務端同時支持的，對於兼容性來說主要是ie10+，其它現代瀏覽器都是支持的。

使用 CORS 跨域的時候其實和普通的 ajax 過程是一樣的，只是瀏覽器在發現這是一個跨域請求的時候會自動幫我們處理一些事，比如驗證等等，所以說只要服務端提供支持，前端是不需要做額外的事情的。

簡單請求（simple request）

只要同時滿足以下兩大條件，就屬於簡單請求。

條件：

請求方法是以下三種方法中的一個：

HEAD

GET

POST

HTTP的頭信息不超出以下幾種字段：

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

過程：

對於簡單的跨域請求，瀏覽器會自動在請求的頭信息加上 `Origin` 字段，表示本次請求來自哪個源（協議 + 域名 + 端口），服務端會獲取到這個值，然後判斷是否同意這次請求並返回。

// 請求

GET /cors HTTP/1.1
Origin: https://api.qiutc.me
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

情況一：服務端允許

如果服務端許可本次請求，就會在返回的頭信息多出幾個字段：

// 返回

Access-Control-Allow-Origin: https://api.qiutc.me
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Info 

Content-Type: text/html; charset=utf-8

這三個帶有 `Access-Control` 開頭的字段分別表示：

- Access-Control-Allow-Origin：必須，它的值是請求時Origin字段的值或者 `*`，表示接受任意域名的請求。

- Access-Control-Allow-Credentials：可選，它的值是一個布爾值，表示是否允許發送Cookie。默認情況下，Cookie不包括在CORS請求之中。設為true，即表示服務器明確許可，Cookie可以包含在請求中，一起發給服務器。

再需要發送cookie的時候還需要注意要在AJAX請求中打開 withCredentials 屬性：

var xhr = new XMLHttpRequest(); 
xhr.withCredentials = true;

需要注意的是，如果要發送Cookie，Access-Control-Allow-Origin就不能設為`*`，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用服務器域名設置的Cookie才會上傳，其他域名的Cookie並不會上傳，且原網頁代碼中的``document.cookie``也無法讀取服務器域名下的Cookie。

- Access-Control-Expose-Headers

可選。CORS請求時，XMLHttpRequest對象的``getResponseHeader()``方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers裡面指定。上面的例子指定，``getResponseHeader('Info')``可以返回Info字段的值。

情況二：服務端拒絕

當然我們為了防止接口被亂調用，需要限制源，對於不允許的源，服務端還是會返回一個正常的HTTP回應，但是不會帶上 `Access-Control-Allow-Origin` 字段，瀏覽器發現這個跨域請求的返回頭信息沒有該字段，就會拋出一個錯誤，會被 `XMLHttpRequest` 的 `onerror` 回調捕獲到。

這種錯誤無法通過 HTTP 狀態碼判斷，因為回應的狀態碼有可能是200。

2. 非簡單請求

條件：

除了簡單請求以外的CORS請求。

非簡單請求是那種對服務器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是 application/json。

1）預檢請求

非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。

瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答覆，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。

預檢請求的發送請求：

OPTIONS /cors HTTP/1.1
Origin: https://api.qiutc.me
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.qiutc.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息裡面，關鍵字段是Origin，表示請求來自哪個源。

除了Origin字段，"預檢"請求的頭信息包括兩個特殊字段。

- Access-Control-Request-Method

該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上例是PUT。

- Access-Control-Request-Headers

該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發送的頭信息字段，上例是X-Custom-Header。

預檢請求的返回：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: https://api.qiutc.me
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

- Access-Control-Allow-Methods

必需，它的值是逗號分隔的一個字符串，表明服務器支持的所有跨域請求的方法。注意，返回的是所有支持的方法，而不單是瀏覽器請求的那個方法。這是為了避免多次"預檢"請求。

- Access-Control-Allow-Headers

如果瀏覽器請求包括Access-Control-Request-Headers字段，則Access-Control-Allow-Headers字段是必需的。它也是一個逗號分隔的字符串，表明服務器支持的所有頭信息字段，不限於瀏覽器在"預檢"中請求的字段。

- Access-Control-Max-Age

該字段可選，用來指定本次預檢請求的有效期，單位為秒。上面結果中，有效期是20天（1728000秒），即允許緩存該條回應1728000秒（即20天），在此期間，不用發出另一條預檢請求。

2）瀏覽器的正常請求和回應

一旦服務器通過了"預檢"請求，以後每次瀏覽器正常的CORS請求，就都跟簡單請求一樣，會有一個Origin頭信息字段。服務器的回應，也都會有一個Access-Control-Allow-Origin頭信息字段。

jsonp

其實對於常用性來說，jsonp應該是使用最經常的一種跨域方式了，他不受瀏覽器兼容性的限制。但是他也有他的侷限性，只能發送 GET 請求，需要服務端和前端規定好，寫法醜陋。

它的原理在於瀏覽器請求>

主要做法是這樣的：

在瀏覽器端：

首先全局註冊一個callback回調函數，記住這個函數名字（比如：resolveJson），這個函數接受一個參數，參數是期望的到的服務端返回數據，函數的具體內容是處理這個數據。

然後動態生成一個>

function resolveJosn(result) {
	console.log(result.name);
}
var jsonpScript= document.createElement("script");
jsonpScript.type = "text/javascript";
jsonpScript.src = "https://www.qiute.com?callbackName=resolveJson";
document.getElementsByTagName("head")[0].appendChild(jsonpScript);

服務端

在接受到瀏覽器端>

然後動態生成一段javascript片段去給這個函數傳入參數執行這個函數。比如：

resolveJson({name: 'qiutc'});

執行

服務端返回這個>

在一些第三方庫往往都會封裝jsonp的操作，比如 jQuery 的`$.getJSON`。

document.domain

一個頁面框架（iframe／frame）之間（父子或同輩），是能夠獲取到彼此的window對象的，但是這個 window 不能拿到方法和屬性（尼瑪這有什麼用）。

這個時候，`document.domain` 就可以派上用場了，我們只要把 `https://blog.qiutc.me/a.html` 和 `https://www.qiutc.me/b.html` 這兩個頁面的 `document.domain` 都設成相同的域名就可以了。

前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，端口都要一致。

但要注意的是，`document.domain` 的設置是有限制的，我們只能把 `document.domain` 設置成自身或更高一級的父域，且主域必須相同。例如：`http://a.b.example.com` 中某個文檔的 `document.domain` 可以設成`http://a.b.example.com`、`http://b.example.com `、`http://example.com`中的任意一個，但是不可以設成 `http://c.a.b.example.com`,因為這是當前域的子域，也不可以設成`http://baidu.com`,因為主域已經不相同了。

這樣我們就可以通過js訪問到iframe中的各種屬性和對象了。

// iframe 裡面的頁面

window.name

window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的所有的頁面都是共享一個 `window.name` 的，每個頁面對 `window.name` 都有讀寫的權限，`window.name` 是持久存在一個窗口載入過的所有頁面中的，並不會因新頁面的載入而進行重置。

比如有一個``http://www.qiutc.me/a.html``頁面，需要通過a.html頁面裡的js來獲取另一個位於不同域上的頁面``http://www.qiutc.com/data.html``裡的數據。

data.html頁面裡的代碼很簡單，就是給當前的window.name設置一個a.html頁面想要得到的數據值。data.html裡的代碼：

那麼在 `a.html` 頁面中，我們怎麼把 `data.html` 頁面載入進來呢？顯然我們不能直接在 `a.html` 頁面中通過改變 `window.location` 來載入data.html頁面（這簡直扯蛋）因為我們想要即使 `a.html `頁面不跳轉也能得到 `data.html` 裡的數據。

答案就是在 `a.html` 頁面中使用一個隱藏的 `iframe` 來充當一箇中間人角色，由 `iframe` 去獲取 `data.html` 的數據，然後 `a.html` 再去得到 `iframe` 獲取到的數據。

充當中間人的 `iframe` 想要獲取到`data.html`的通過`window.name`設置的數據，只需要把這個`iframe`的src設為`http://www.qiutc.com/data.html`就行了。然後`a.html`想要得到`iframe`所獲取到的數據，也就是想要得到`iframe`的`window.name`的值，還必須把這個`iframe`的`src`設成跟`a.html`頁面同一個域才行，不然根據前面講的同源策略，`a.html`是不能訪問到`iframe`裡`的window.name`屬性的。這就是整個跨域過程。

window.postMessage

`window.postMessage(message, targetOrigin)` 方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬於同源或不同源。兼容性：

調用postMessage方法的window對象是指要接收消息的那一個window對象，該方法的第一個參數message為要發送的消息，類型只能為字符串；第二個參數targetOrigin用來限定接收消息的那個window對象所在的域，如果不想限定域，可以使用通配符 * 。

需要接收消息的window對象，可是通過監聽自身的message事件來獲取傳過來的消息，消息內容儲存在該事件對象的data屬性中。

上面所說的向其他window對象發送消息，其實就是指一個頁面有幾個框架的那種情況，因為每一個框架都有一個window對象。在討論第種方法的時候，我們說過，不同域的框架間是可以獲取到對方的window對象的，雖然沒什麼用，但是有一個方法是可用的－`window.postMessage`。下面看一個簡單的示例，有兩個頁面：

// 主頁面 blog.qiutc.com

<iframe>```
/<iframe>

// b 頁面

CSST (CSS Text Transformation)

一種用 CSS 跨域傳輸文本的方案。

優點：相比 JSONP 更為安全，不需要執行跨站腳本。

缺點：沒有 JSONP 適配廣，CSST 依賴支持 CSS3 的瀏覽器。

原理：

通過讀取 CSS3 content 屬性獲取傳送內容。

通過創建一個 link 請求到 css 文件，然後通過 `computedStyle = window.getComputedStyle` 獲取到指定元素的 style 對象，再通過 `computedStyle .content` 獲取到內容：

具體頁面中：

這裡的 `fn` 是我們獲取到內容執行的函數；

服務端可以返回的 css 文件內容：

這裡的 `text` 就是我們可以獲取到的數據；

我們可以通過監聽函數 animationstart/webkitAnimationStart 來判斷接收到 css 文件的時機：

// 我們在服務端給 #csst 元素設置了動畫（當然這個是可配置的） 

var cs = document.getElementById('cast');
cs.addEventListener('animationstart', handler, false);
cs.addEventListener('webkitAnimationStart', handler, false);

這樣我們就可以從 content 中獲取到數據了。

閱讀更多 JS加加網 的文章

關鍵字: 瀏覽器 Mozilla Origin