跨域HTTP請求解決方案

Bowman_han 發布于2019-08-21 17:36 / 1667人閱讀

摘要：持續更新地址跨域請求是指當前文檔訪問其他源提供的資源。目前常用的跨域解決方案有。跨域讀跨域的解決方案這是我自己瞎取的一個名字，大致是利用瀏覽器支持標簽嵌入跨域屬性實現的一種方案。

持續更新地址：http://jaylin.wang/2017/cross...

跨域HTTP請求是指當前文檔訪問其他源提供的資源。兩個頁面具有相同的協議，域名和端口，則兩個頁面屬于相同的源，不同子域名之間也屬于不同的源。這是瀏覽器端的同源策略的約束，同源策略則是瀏覽器隔離潛在惡意文件的安全機制。

目前常用的跨域解決方案有EmbedPing、JSONP、CORS。

一些知識點

跨域限制是瀏覽器的一種行為

當我們在瀏覽器的一個頁面中嘗試進行一次跨域操作，比如我們在 localhost 的一個頁面通過 ajax 訪問 127.0.0.1 的一個路由，127.0.0.1已經將數據返回給瀏覽器，瀏覽器禁止了獲取響應數據行為。我們可以看一張圖：

跨域請求的幾種方式

跨域寫
瀏覽器始終支持通過跨域寫操作。例如通過表單提交方式向其他源提交數據，點擊鏈接重定向到其他源。

跨域嵌入
瀏覽器始終支持跨域資源的嵌入。例如通過 img、script、video 等元素的 src 屬性嵌入跨域資源。

跨域讀

跨域的解決方案 EmbedPing

這是我自己瞎取的一個名字，大致是利用瀏覽器支持標簽嵌入跨域屬性實現的一種方案。img、script、link[rel="stylesheet"]會在頁面渲染過程中請求其src/href設置的資源地址，我們可以在訪問的路由中做處理。例如使用img的src屬性：

因為無法獲取到服務端返回的數據，EmbedPing是瀏覽器向服務器單向請求的過程。

我們可以使用 EmbedPing 做一些不嚴格統計。

JSONP

JSONP也利用了 script 標簽的 src 屬性，瀏覽器會執行加載成功后的js。JSONP的局限是只能發送一個GET請求。

應用示例

看一個簡單示例，我們希望在當前域的頁面上打印服務器的一個狀態，我們使用JSONP可以這樣實現，前可以看一段簡單代碼（服務端使用koa構建的）：

當前域屬于 http://localhost:3000,我們在頁面上這請求

在 http://localhost:4000/jsonp/run 中，我們返回了一段打印狀態的script

var valForServerB = "a"
router.get("/jsonp/run", (ctx) => {
  let script = `
    alert("我來自服務器b，我的值是${valForServerB}")
  `
  ctx.body = script
})

這樣，我們可以在當前頁面上顯示 valForServerB 的值了。

幾種類型

根據 JSONP 返回的代碼片段不同，混入自己的情感，我將 JSONP 分為三種類型（這種帶著情感的劃分，需要各位大牛的指正）：

返回執行
返回代碼即執行代碼，直接在頁面上產生效果

返回定義
返回代碼是函數的定義，具體調用時機交給當前頁面決定

返回調用
函數的執行過程是在頁面上所定義的，JSONP的返回只是函數的調用，當然包含傳給函數的參數。

為了保持當前頁面的的絕對控制權，返回調用應該是應用最廣的

錯誤處理

JSONP使用過程中，會有兩種常見錯誤：

請求失敗或服務器返回失敗
捕獲此類錯誤，我們是借用 script 的 onerror 處理

服務器返回內容錯誤
針對這類錯誤，我們會在當前頁面借用定時器去處理。在返回調用時，我們可以在頁面上的函數定義中埋下時間因子；在返回定義時，我們可以設置時間點去檢測期望調用的方法是否存在。當然，此方法會因為網絡等因素變得不可靠。

CORS(跨域資源共享)

CORS是當前頁面與其他域執行的一種雙方約束，需要瀏覽器應用和服務器程序之間的協調。

我們在服務器端可以通過設置CORS響應頭部：

Access-Control-Allow-Origin: | *
允許訪問的源

Access-Control-Allow-Methods
允許訪問的方法

Access-Control-Allow-Headers
運行添加的請求頭部

Access-Control-Expose-Headers
允許客戶端可以訪問的頭部

Access-Control-Max-Age
預請求的緩存周期

Access-Control-Allow-Credentials
是否運行請求加入用戶憑證信息

相應的，在請求頭部中，我們可以加入：

Origin
告知服務器請求的源

Access-Control-Request-Method
告知服務器使用請求的的方法

Access-Control-Request-Headers
告知服務器，請求中攜帶的頭部

結語

跨域請求好，安全第一位。在我們跨域請求時，我們要確保我們請求的服務器返回的數據是可信任的。

相關鏈接

cross-origin-resolve-demo

MDN CORS

GPU云服務器云服務器跨域請求跨域請求方式 javascript跨域請求 jquery跨域請求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89735.html

AJAX 跨域解析

摘要：這里只講解了兩種常見的跨域方式，因為存在一些弊端，因此推薦使用等方式來解決跨域問題。一、什么是 AJAX 跨域問題同源策略規定，AJAX 請求（XMLHttpRequest）只能發給同源的網址，否則就會出錯。所謂的同源策略是指 3 個相同：協議相同、域名相同、端口相同。比如 http://www.example.com/index.html 這個網址，協議是http ，域名是 w...

tinylcy 2019-08-23 12:14 評論0 收藏0
前端跨域方法論

摘要：說明是否允許通訊同一域名允許同一域名下的不同文件夾允許不同端口號不允許不同協議不允許不同域名不允許主域相同，子域不同不允許跨域解決方案由于瀏覽器同源策略是允許標簽這樣的跨域資源嵌套的，所以標簽的資源不受同源策略的限制。前言本著學習和總結的態度寫的技術輸出，文中有任何錯誤和問題，請大家指出。更多的技術輸出可以查看我的 github博客。整理了一些前端的學習資源，希望能夠幫助到有需要...

leejan97 2019-08-23 12:11 評論0 收藏0
ajax跨域，這應該是最全的解決方案了

摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0
九種跨域方式實現原理（完整版）

摘要：二跨域解決方案原理利用標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的數據。使用反向代理實現跨域，是最簡單的跨域方式。前言前后端數據交互經常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內容。本文完整的源代碼請猛戳github博客，紙上得來終覺淺，建議動手敲敲代碼一、什么是跨域？ 1.什么是同源策略及其限制內容？同源策略是一種約定，它是瀏覽器最核心...

edgardeng 2019-08-23 14:57 評論0 收藏0
九種跨域方式實現原理（完整版）

摘要：二跨域解決方案原理利用標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的數據。使用反向代理實現跨域，是最簡單的跨域方式。前言前后端數據交互經常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內容。本文完整的源代碼請猛戳github博客，紙上得來終覺淺，建議動手敲敲代碼一、什么是跨域？ 1.什么是同源策略及其限制內容？同源策略是一種約定，它是瀏覽器最核心...

justCoding 2019-08-02 14:10 評論0 收藏0
nginx解決跨域問題

摘要：一產生跨域的原因瀏覽器限制跨域請求二解決思路解決跨域有多重，在這里主要講用解決跨域代理瀏覽器禁止檢查跨域三下載安裝下載地址選擇其中一個版本下載，再解壓即可使用在目錄下輸入，若出現版本號，則安裝成功四反向代理解決跨域客戶端解決跨域我們使用的一. 產生跨域的原因 1.瀏覽器限制 2.跨域 3.XHR（XMLHttpRequest）請求二. 解決思路解決跨域有多重，在這里主要講用ngi...

Jeffrrey 2019-08-26 13:50 評論0 收藏0