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

講跨域以前，咱們先來說同源策略（SOP），同源策略是網景公司提出的一個著名安全策略。所謂同源就是域名、協議、端口相同。例如www.12306.cn中，http就是超文本傳輸協議，12306就是域名，cn就是端口。若是兩個資源須要通訊，那麼他必須知足SOP。而在前端中咱們使用ajax進行數據請求。
若是資源不一樣域，那麼咱們在使用ajax請求數據的時候，就會報錯，表示拒絕訪問。那如何進行跨域處理呢？事實上有三種方法一、JSONP，二、子域代理，三、CORS。因爲第二種方法現在已經採用的很是少，因此咱們在這兒不作講解

1、JSONP(JSON with Padding)

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

一、工做原理

咱們先來看一個例子：使用ajax請求一個普通的JSON文件。假設你使用ajax請求'jsonpjs.com/info.json&#…

{
    'title': 'jsonp explaintation',
    'author': 'Cornelius'
}複製代碼

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

經過script元素請求資源，當文件加載完成時，瀏覽器會把json響應看成Javascript解析。可是這樣的狀況下咱們仍是沒法得到json數據。
因爲該對象沒有被存儲，也沒有賦值給一個變量，或者做爲參數傳遞給一個函數，瀏覽器就會忽略它。
那麼該如何獲取JSON輸出呢?
這兒有兩種方法，第一種直接由服務器把json數據進行存儲。例若有一個外部URL，jsonjs.com//info.js(注意…
var jsonResponse = {
'title': 'jsonp explaintation',
'author': 'Cornelius'
}

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

jsonHandler({
    'title': 'jsonp explaintation',
    'author': 'Cornelius'
})複製代碼

使用這種方式的好處在於，咱們不須要依靠script元素的onload事件來判斷json是否可用，當info.js被解析時，回調便會自動執行。這須要加載