跨域cors

時間 2020-03-13

標籤 cors 简体版

原文原文鏈接

1、跨域資源共享 CORS

對於web開發來說，因爲瀏覽器的同源策略，咱們須要常用一些hack的方法去跨域獲取資源，可是hack的方法總歸是hack。javascript

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

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

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

https://caniuse.com/#feat=corshtml5

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

兩種請求web

CORS 的請求分兩種，這也是瀏覽器爲了安全作的一些處理，不一樣狀況下瀏覽器執行的操做也是不同的，主要分爲兩種請求，固然這一切咱們是不須要作額外處理的，瀏覽器會自動處理的。ajax

1. 簡單請求（simple request）

只要同時知足如下兩大條件，就屬於簡單請求。json

條件：api

1 ) 請求方法是如下三種方法中的一個：

HEAD
GET
POST

2 ）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頭信息字段。

2、 jsonp

jsonp = json + padding

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

它的原理在於瀏覽器請求 script 資源不受同源策略限制，而且請求到 script 資源後當即執行。

主要作法是這樣的：

**在瀏覽器端：
**

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

而後動態生成一個 script 標籤，src 爲：請求資源的地址＋獲取函數的字段名＋回調函數名稱，這裏的獲取函數的字段名是要和服務端約定好的，是爲了讓服務端拿到回調函數名稱。（如：`http://www.qiute.com?callbackName=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);

**服務端
**

在接受到瀏覽器端 script 的請求以後，從url的query的callbackName獲取到回調函數的名字，例子中是`resolveJson`。

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

resolveJson({name: 'qiutc'});

**執行
**

服務端返回這個 script 以後，瀏覽器端獲取到 script 資源，而後會當即執行這個 javascript，也就是上面那個片斷。這樣就能根據以前寫好的回調函數處理這些數據了。

在一些第三方庫每每都會封裝jsonp的操做，好比 jQuery 的`$.getJSON`。

3、 document.domain

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

// 當前頁面域名 https://blog.qiutc.me/a.html

<script>
function onLoad() {
    var iframe =document.getElementById('iframe');
    var iframeWindow = iframe.contentWindow; // 這裏能夠獲取 iframe 裏面 window 對象，可是幾乎沒用
    var doc = iframeWindow.document; // 獲取不到
}
</script>
<iframe src="https://www.qiutc.me/b.html" onload="onLoad()"</iframe>

這個時候，`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中的各類屬性和對象了。

// 主頁面：https://blog.qiutc.me/a.html

<script>
document.domain = 'qiutc.me';
function onLoad() {
    var iframe =document.getElementById('iframe');
    var iframeWindow = iframe.contentWindow; // 這裏能夠獲取 iframe 裏面 window 對象而且能獲得方法和屬性
    var doc = iframeWindow.document; // 獲取到
}
</script>
<iframe src="https://www.qiutc.me/b.html" onload="onLoad()"</iframe>

// iframe 裏面的頁面
<script>
document.domain = 'qiutc.me';
</script>

4、 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裏的代碼：

<script>
window.name = '我是被指望獲得的數據';
</script>

那麼在 `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`屬性的。這就是整個跨域過程。

// a.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    function getData() {
        var iframe =document.getElementById('iframe');
        iframe.onload = function() {
            var data = iframe.contentWindow.name; // 獲得
        }
        iframe.src = 'b.html';  // 這裏b和a同源
    }
  </script>
</head>
<body>
  <iframe src="https://www.qiutc.com/data.html" style="display:none" onload="getData()"</iframe>
</body>
</html>

5、 window.postMessage

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

https://caniuse.com/#search=postMessage

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

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

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

// 主頁面  blog.qiutc.com

<script>
function onLoad() {
    var iframe =document.getElementById('iframe');
    var iframeWindow = iframe.contentWindow;
    iframeWindow.postMessage("I'm message from main page.");
}
</script>
<iframe src="https://www.qiutc.me/b.html" onload="onLoad()"</iframe>```

// b 頁面
<script>
window.onmessage = function(e) {
    e = e || event;
    console.log(e.data);
}
</script>

6、 CSST (CSS Text Transformation)

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

優勢：相比 JSONP 更爲安全，不須要執行跨站腳本。

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

原理：

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

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

具體頁面中：

function handle (fn) {

  var computedStyle = getComputedStyle(span, false);

  var content = computedStyle.content;

  console.log('content: %s', content);

  var match = content.match(/[\w+=\/]+/);

  // base64 解碼

  if (match) {
      try {
          content = decodeURIComponent(escape(atob(match[0])));
      } catch (ex) {
          fn(ex);
          return;
      }
  }

  fn(content);
}

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

服務端能夠返回的 css 文件內容：

`
  @keyframes csst {
    from {}
    to {
      color: red;
    }
  }
  @-webkit-keyframes csst {
    from {}
    to {
      color: red;
    }
  }
  #csst {
    content: "${text}";
    animation: cost 2s;
    -webkit-animation: ${id} 2s;
  }`;

這裏的 `text` 就是咱們能夠獲取到的數據；

咱們能夠經過監聽函數 animationstart/webkitAnimationStart 來判斷接收到 css 文件的時機：

// 咱們在服務端給 #csst 元素設置了動畫（固然這個是可配置的）
var cs = document.getElementById('cast');

cs.addEventListener('animationstart', handler, false);

cs.addEventListener('webkitAnimationStart', handler, false);

這樣咱們就能夠從 content 中獲取到數據了。