成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

跨域HTTP請(qǐng)求解決方案

Bowman_han / 1719人閱讀

摘要：持續(xù)更新地址跨域請(qǐng)求是指當(dāng)前文檔訪問其他源提供的資源。目前常用的跨域解決方案有?？缬蜃x跨域的解決方案這是我自己瞎取的一個(gè)名字，大致是利用瀏覽器支持標(biāo)簽嵌入跨域?qū)傩詫?shí)現(xiàn)的一種方案。

持續(xù)更新地址：http://jaylin.wang/2017/cross...

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

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

一些知識(shí)點(diǎn)

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

當(dāng)我們?cè)跒g覽器的一個(gè)頁面中嘗試進(jìn)行一次跨域操作，比如我們?cè)?localhost 的一個(gè)頁面通過 ajax 訪問 127.0.0.1 的一個(gè)路由，127.0.0.1已經(jīng)將數(shù)據(jù)返回給瀏覽器，瀏覽器禁止了獲取響應(yīng)數(shù)據(jù)行為。我們可以看一張圖：

跨域請(qǐng)求的幾種方式

跨域?qū)?br>瀏覽器始終支持通過跨域?qū)懖僮?。例如通過表單提交方式向其他源提交數(shù)據(jù)，點(diǎn)擊鏈接重定向到其他源。

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

跨域讀

跨域的解決方案 EmbedPing

這是我自己瞎取的一個(gè)名字，大致是利用瀏覽器支持標(biāo)簽嵌入跨域?qū)傩詫?shí)現(xiàn)的一種方案。img、script、link[rel="stylesheet"]會(huì)在頁面渲染過程中請(qǐng)求其src/href設(shè)置的資源地址，我們可以在訪問的路由中做處理。例如使用img的src屬性：

因?yàn)闊o法獲取到服務(wù)端返回的數(shù)據(jù)，EmbedPing是瀏覽器向服務(wù)器單向請(qǐng)求的過程。

我們可以使用 EmbedPing 做一些不嚴(yán)格統(tǒng)計(jì)。

JSONP

JSONP也利用了 script 標(biāo)簽的 src 屬性，瀏覽器會(huì)執(zhí)行加載成功后的js。JSONP的局限是只能發(fā)送一個(gè)GET請(qǐng)求。

應(yīng)用示例

看一個(gè)簡(jiǎn)單示例，我們希望在當(dāng)前域的頁面上打印服務(wù)器的一個(gè)狀態(tài)，我們使用JSONP可以這樣實(shí)現(xiàn)，前可以看一段簡(jiǎn)單代碼（服務(wù)端使用koa構(gòu)建的）：

當(dāng)前域?qū)儆?http://localhost:3000,我們?cè)陧撁嫔线@請(qǐng)求

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

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

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

幾種類型

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

返回執(zhí)行
返回代碼即執(zhí)行代碼，直接在頁面上產(chǎn)生效果

返回定義
返回代碼是函數(shù)的定義，具體調(diào)用時(shí)機(jī)交給當(dāng)前頁面決定

返回調(diào)用
函數(shù)的執(zhí)行過程是在頁面上所定義的，JSONP的返回只是函數(shù)的調(diào)用，當(dāng)然包含傳給函數(shù)的參數(shù)。

為了保持當(dāng)前頁面的的絕對(duì)控制權(quán)，返回調(diào)用應(yīng)該是應(yīng)用最廣的

錯(cuò)誤處理

JSONP使用過程中，會(huì)有兩種常見錯(cuò)誤：

請(qǐng)求失敗或服務(wù)器返回失敗
捕獲此類錯(cuò)誤，我們是借用 script 的 onerror 處理

服務(wù)器返回內(nèi)容錯(cuò)誤
針對(duì)這類錯(cuò)誤，我們會(huì)在當(dāng)前頁面借用定時(shí)器去處理。在返回調(diào)用時(shí)，我們可以在頁面上的函數(shù)定義中埋下時(shí)間因子；在返回定義時(shí)，我們可以設(shè)置時(shí)間點(diǎn)去檢測(cè)期望調(diào)用的方法是否存在。當(dāng)然，此方法會(huì)因?yàn)榫W(wǎng)絡(luò)等因素變得不可靠。

CORS(跨域資源共享)

CORS是當(dāng)前頁面與其他域執(zhí)行的一種雙方約束，需要瀏覽器應(yīng)用和服務(wù)器程序之間的協(xié)調(diào)。

我們?cè)诜?wù)器端可以通過設(shè)置CORS響應(yīng)頭部：

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

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

Access-Control-Allow-Headers
運(yùn)行添加的請(qǐng)求頭部

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

Access-Control-Max-Age
預(yù)請(qǐng)求的緩存周期

Access-Control-Allow-Credentials
是否運(yùn)行請(qǐng)求加入用戶憑證信息

相應(yīng)的，在請(qǐng)求頭部中，我們可以加入：

Origin
告知服務(wù)器請(qǐng)求的源

Access-Control-Request-Method
告知服務(wù)器使用請(qǐng)求的的方法

Access-Control-Request-Headers
告知服務(wù)器，請(qǐng)求中攜帶的頭部

結(jié)語

跨域請(qǐng)求好，安全第一位。在我們跨域請(qǐng)求時(shí)，我們要確保我們請(qǐng)求的服務(wù)器返回的數(shù)據(jù)是可信任的。

相關(guān)鏈接

cross-origin-resolve-demo

MDN CORS

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/89735.html

相關(guān)文章

  • AJAX 跨域解析

    摘要：這里只講解了兩種常見的跨域方式，因?yàn)榇嬖谝恍┍锥耍虼送扑]使用等方式來解決跨域問題。 一、什么是 AJAX 跨域問題 同源策略規(guī)定，AJAX 請(qǐng)求（XMLHttpRequest）只能發(fā)給同源的網(wǎng)址，否則就會(huì)出錯(cuò)。所謂的同源策略是指 3 個(gè)相同：協(xié)議相同、域名相同、端口相同。 比如 http://www.example.com/index.html 這個(gè)網(wǎng)址，協(xié)議是http ，域名是 w...

    tinylcy 評(píng)論0 收藏0

  • 前端跨域方法論

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

    leejan97 評(píng)論0 收藏0

  • ajax跨域，這應(yīng)該是最全的解決方案了

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

    ytwman 評(píng)論0 收藏0

  • 九種跨域方式實(shí)現(xiàn)原理（完整版）

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

    edgardeng 評(píng)論0 收藏0

  • 九種跨域方式實(shí)現(xiàn)原理（完整版）

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

    justCoding 評(píng)論0 收藏0

  • nginx解決跨域問題

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

    Jeffrrey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<