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

曹金海發布于2019-08-22 11:05 / 2671人閱讀

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

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

一、JSONP(JSON with Padding)

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

1、工作原理

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

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

瀏覽器接受到這個json文件后，就會把他當成字符串進行處理，但是這個字符串我們需要把它轉換為對象，才能夠被javascript所使用，這里我們就可以使用json.parse函數來完成。當然由于同源策略的限制，ajax只能夠在同一個域中才能夠使用。但是正如我們前面提到的，script是html腳本元素它可以規避SOP的檢查所以我們為了請求到json文件，我們可以使用這種方式

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

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

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

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

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

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

GPU云服務器云服務器 json的兩種結構】數據統計的兩種方法最優生成樹的兩種算法域名解析的兩種主要方式為

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

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

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

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

gyl_coder 2019-08-21 13:50 評論0 收藏0
前端跨域解決方案

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

Honwhy 2019-08-21 17:52 評論0 收藏0
Web開發之跨域與跨域資源共享

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

Eastboat 2019-08-20 12:29 評論0 收藏0