国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

解決跨域的兩種方案JSONP和CORS

曹金海 / 2680人閱讀

摘要：由于第二種方法如今已經(jīng)采用的非常少，所以我們在這兒不做講解一帶填充的是一種可以在中繞過同源策略，并發(fā)起跨域請求的使用模式，可以啟動的跨域請求同源策略有一個顯著的例外，腳本元素是可以規(guī)避檢查的。

講跨域之前，我們先來講同源策略（SOP），同源策略是網(wǎng)景公司提出的一個著名安全策略。所謂同源就是域名、協(xié)議、端口相同。例如http://www.12306.cn中，http就是超文本傳輸協(xié)議，12306就是域名，cn就是端口。如果兩個資源需要通信，那么他必須滿足SOP。而在前端中我們使用ajax進(jìn)行數(shù)據(jù)請求。
如果資源不同域，那么我們在使用ajax請求數(shù)據(jù)的時候，就會報錯，表示拒絕訪問。那如何進(jìn)行跨域處理呢？事實上有三種方法1、JSONP，2、子域代理，3、CORS。由于第二種方法如今已經(jīng)采用的非常少，所以我們在這兒不做講解

一、JSONP(JSON with Padding)

帶填充的JSON,是一種可以在JS中繞過同源策略，并發(fā)起跨域HTTP請求的使用模式，可以啟動JS的跨域HTTP請求
同源策略有一個顯著的例外，HTML腳本元素是可以規(guī)避SOP檢查的。那就意味著我們可以采用動態(tài)注入腳本的方式向其他源發(fā)出HTTP請求。JSONP正是利用了這個例外情況進(jìn)行跨域數(shù)據(jù)加載的。

1、工作原理

我們先來看一個例子：使用ajax請求一個普通的JSON文件。假設(shè)你使用ajax請求"http://jsonpjs.com/info.json",它會返回一個JSON文檔，其中包含一些信息

{
    "title": "jsonp explaintation",
    "author": "Cornelius"
}

瀏覽器接受到這個json文件后，就會把他當(dāng)成字符串進(jìn)行處理，但是這個字符串我們需要把它轉(zhuǎn)換為對象，才能夠被javascript所使用，這里我們就可以使用json.parse函數(shù)來完成。當(dāng)然由于同源策略的限制，ajax只能夠在同一個域中才能夠使用。但是正如我們前面提到的，script是html腳本元素它可以規(guī)避SOP的檢查所以我們?yōu)榱苏埱蟮絡(luò)son文件，我們可以使用這種方式

通過script元素請求資源，當(dāng)文件加載完成時，瀏覽器會把json響應(yīng)當(dāng)作Javascript解析。但是這樣的情況下我們還是無法獲得json數(shù)據(jù)。
由于該對象沒有被存儲，也沒有賦值給一個變量，或者作為參數(shù)傳遞給一個函數(shù)，瀏覽器就會忽略它。
那么該如何獲取JSON輸出呢?
這兒有兩種方法，第一種直接由服務(wù)器把json數(shù)據(jù)進(jìn)行存儲。例如有一個外部URL，http://jsonjs.com//info.js(注意文件擴展名是.js而不是.json),內(nèi)容如下

var jsonResponse = {
    "title": "jsonp explaintation",
    "author": "Cornelius"
}

當(dāng)文件加載完成后，我們就可以通過全局變量jsonResponse訪問這個JSON對象了。當(dāng)該變量包含所請求數(shù)據(jù)時，我們可以使用script.onload來通知代碼。那么另外一種通過一個回調(diào)函數(shù)代替全局變量的方式來傳遞JSON對象

jsonHandler({
    "title": "jsonp explaintation",
    "author": "Cornelius"
})

使用這種方式的好處在于，我們不需要依靠script元素的onload事件來判斷json是否可用，當(dāng)info.js被解析時，回調(diào)便會自動執(zhí)行。這需要加載
我的github如果對你有幫助請點一個star
第一次寫技術(shù)文章，不足的地方還請各位多多指教
參考文獻(xiàn)：跨域資源共享 CORS 詳解 ---阮一峰

    [third-party javascript ---- Ben Vinegar Anton Kovalyov][2]

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91752.html

相關(guān)文章

  • js跨域問題及常用的兩種解決方案

    摘要：類似這樣而在客戶端我們只需要定義一個預(yù)定好的回調(diào)函數(shù)即可。處理跨域請求得到的數(shù)據(jù)其中的是我們在客戶端定義好的在數(shù)據(jù)請求成功后要執(zhí)行的回調(diào)函數(shù)。 跨域產(chǎn)生的原因 跨域是由瀏覽器的同源策略引起的，即不同源（協(xié)議,域名,端口中其中有一個不同）的js是不能讀取對方的資源的。當(dāng)要網(wǎng)站中的js要請求其他網(wǎng)站的數(shù)據(jù)時就會產(chǎn)生跨域問題，就像下面這樣，瀏覽器會報錯。 showImg(https://se...

    gyl_coder 評論0 收藏0

  • 前端跨域解決方案

    摘要：瀏覽器同源策略什么是瀏覽器同源策略同源策略是瀏覽器安全的基礎(chǔ)。同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進(jìn)行交互。這里我們做一下簡要的總結(jié)受到瀏覽器同源策略的限制，頁面的無法被頁面的訪問和操作。不受同源策略的限制。 瀏覽器同源策略 什么是瀏覽器同源策略？ 同源策略（Same Origin Policy）是瀏覽器安全的基礎(chǔ)。 同源策略限制從一個源加載的文檔或腳本如何與來...

    Honwhy 評論0 收藏0

  • Web開發(fā)之跨域與跨域資源共享

    摘要：例外當(dāng)涉及到同源策略時，有兩個主要的例外授信范圍兩個相互之間高度互信的域名，如公司域名，不遵守同源策略的限制。端口未將端口號加入到同源策略的組成部分之中，因此和屬于同源并且不受任何限制。 原文鏈接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入瀏...

    Eastboat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<