前端培訓-中級階段（11、12）- 跨域請求原理以及實現（2019-08-22期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

JSONP 跨域請求原理以及實現方式jQuery封裝的Ajax調用和JSONP數據跨域請求原理和實現

這節題目有點奇怪啊。
上節我們講了同源策略，這節我們講講如何跨域。這東西就和產品提需求一樣，我知道不合理，但是我就想要。

跨域分類

1. iframe 跨域
   比如 www.51vv.com 的一部分（header吧），我 k.51vv.com 也想用。默認情況下不同源，是不允許的。那我們怎麼辦呢？
   

   1. domain
   2. postMessage

2. ajax 跨域

   1. JSONP
   2. CORS
   3. 服務器代理

3. canvas 資源跨域

   1. image 跨域

4. script 資源跨域

   1. Script error.
      爲了提升網站的訪問速度，我們通常都會將靜態資源文件(css, image, javascript)放在CDN。當這些從CDN的JavaScript腳本執行出錯，因爲違背了同源策略, 爲了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個Script error.。

ajax 跨域方案

這部分知識是我們開發中經常會遇到的。下面我們來介紹一下常見的幾種方法。

JSONP 跨域方案

JSONP 優缺點

1. 優點

   1. 瀏覽器兼容性強（全支持）

2. 缺點

   1. 不安全（嵌入異常邏輯代碼）
   2. 只能發GET請求

JSONP 原理

下面我們來說一下JSONP的原理，順便分析一下上面的優缺點。

1. 首先 script 標籤引入的代碼，不管跨不跨域都可以執行。常見的就是CDN的資源，我們拿來使用。
2. 正常的JSON數據爲{code: 200, res: [{id:1,state:0},{id:2,state:1}]}。
   如果我們 script 標籤引入的資源就是帶數據的。
   比如console.log({code: 200, res: [{id:1,state:0},{id:2,state:1}]})，這樣不就等於拿到了數據？
3. 服務端拼接callback名稱，動態生成返回數據。

從上面的原理看到JSONP就等於用script加載代碼。基於<script>所以兼容性超級棒。同樣因爲基於<script>代碼加載回來了就會執行，如果其中有惡意代碼很危險。

CORS 跨域方案

CORS 是一個 W3C 標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
是用來處理跨域問題的一個標準方案。分爲兩種情況，簡單請求和非簡單請求。

優缺點

1. 優點

   1. 一個標準化的方案。
   2. 對於 ajax 請求的方案。支持（get、post、put、delete）等多種請求方式。
   3. 包含多種跨域情況，比如script跨域，image跨域
   4. 安全。因爲他拿到的只是單純的數據，數據具體怎麼使用，還是由開發者來控制。

2. 缺點

   1. 兼容性較弱（IE 低版本的時候還沒這個規範，所以不支持）
   2. 非簡單請求首次會預檢

簡單請求與非簡單請求的區分

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

1. 請求方法是以下三種方法之一：HEAD、GET、POST

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

   1. Accept
   2. Accept-Language
   3. Content-Language
   4. Last-Event-ID

   5. Content-Type：只限於三個值

      1. application/x-www-form-urlencoded、
      2. multipart/form-data
      3. text/plain

凡是不同時滿足上面兩個條件，就屬於非簡單請求。

OPTIONS

瀏覽器對於這兩種請求的處理流程是不一樣的。

• 處理流程的區別？

  • 簡單請求：一次請求
  • 非簡單請求：兩次請求，在發送數據之前會先發一次預檢（OPTIONS）請求，只有通過後纔會正式的發送請求用於數據傳輸。

• 預檢請求

  • 請求方式（method）：OPTIONS

  • 檢查服務器是否支持對應的請求。

    • 通過則允許傳輸數據
    • 不通過則不再發送真正想要發送的消息（body）

  • 如何預檢

    • 如果複雜請求是PUT等請求，則服務端需要設置允許某請求，否則預檢不通過
      Access-Control-Request-Method
    • 如果複雜請求設置了請求頭，則服務端需要設置允許某請求頭，否則預檢不通過
      Access-Control-Request-Headers

服務器代理 跨域方案

跨域的前提還記得嗎？如果我們只請求當前域名不就沒問題了嗎？我問根據一定規則，讓服務端幫我們請求。

優缺點

1. 優點

   1. 兼容極好
   2. 方便更換源

2. 缺點

   1. 流量問題
   2. 需要主要安全問題，防止代理到內部服務器

nginx實現

    server {
        listen       80;
        server_name  proxy.lilnong.top;
        location = /50x.html {
            root   html;
        }
        location /proxy {
            proxy_pass http://8.8.8.8/;
        }
    }

意味着如果請求https://proxy.lilnong.top/proxy/index.html就會被代理到http://8.8.8.8/index.html;
這裏有個注意點，proxy_pass http://8.8.8.8/;和proxy_pass http://8.8.8.8;。前者會過濾掉location的匹配串，後者不會。

總結

ajax 的跨域目前基本依靠 CORS 來解決。
nginx 用於內網也是不錯的選擇。
jsonp在一些三方應用上表現還不錯。

當然，不管哪種方案都需要服務端的配置

微信公衆號：前端linong

初級階段文章目錄

1. 前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）
2. 前端培訓-初級階段（13） - 正則表達式
3. 前端培訓-初級階段（13） - 類、模塊、繼承
4. 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
5. 前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
6. 前端培訓-初級階段（13、18）
7. 前端培訓-初級階段（9 -12）
8. 前端培訓-初級階段（5 - 8）
9. 前端培訓-初級階段（1 - 4）

中級階段文章目錄

1. 前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
2. 前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）
3. 前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）
4. 前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）
5. 前端培訓-中級階段（6）- jQuery元素節點操作（2019-07-18期）
6. 前端培訓-中級階段（7）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）
7. 前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）
8. 前端培訓-中級階段（9）- 原生Ajax的運行原理與實現（2019-08-08期）
9. 前端培訓-中級階段（10）- 同源策略（2019-08-15期）

資料

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. 瀏覽器同源策略及跨域的解決方法
3. Same-origin policy
4. Script error.全面解析
   之前雖然也知道這個錯誤。但是沒有仔細看過。直到靜態資源上CDN，才發現了這個問題。
5. 跨域資源共享 CORS 詳解 - 阮一峯的網絡日誌
   記得當初是一個上傳功能，需要走統一上傳服務器發現了CORS和OPTIONS。就是在大佬這裏看懂的。