同源策略，跨域資源共享和JSONP

同源策略限制從乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的關鍵的安全機制。

乙個源的定義：

協議+網域名稱+埠三者組合都相同，則屬於同源策略，其他都是跨域策略

跨域資源共享（cors）是乙份瀏覽器技術的規範，提供了web伺服器從不同網域傳來沙盒指令碼的方法，以避開瀏覽器的同源策略，是jsonp模式的現代版。與jsonp不同，cors除了支援get方法以外，還支援其他http方法。用cors可以讓網頁設計師用一般的 xmlhttprequest，這種方式的錯誤處理比jsonp要來的好。另一方面，jsonp可以在不支援cors的老舊瀏覽器上運作，現代的瀏覽器都支援cors。

在django應用中，實現跨域操作有以下幾種:

1. 在表單提交中，加上。

2. ajax提交時，在附加引數中新增 } '}

3. 安裝django第三方包：

由於同源策略，一般來說不允許j**ascript跨域訪問其他伺服器的頁面物件，但是html的元素是乙個例外。利用元素的這個開放策略，網頁可以得到從其他**動態產生的 json資料，而這種使用模式就是所謂的 jsonp。用 jsonp 抓到的資料並不是 json，而是任意的j**ascript，用 j**ascript 直譯器執行而不是用 json 解析器解析。

關於json和jsonp那點事：json是資料交換格式， jsonp是一種跨域的資料交換協議

json的優點：

1、基於純文字，跨平台傳遞極其簡單；

2、j**ascript原生支援，後台語言幾乎全部支援；

3、輕量級資料格式，占用字元數量極少，特別適合網際網路傳遞；

4、可讀性較強，雖然比不上xml那麼一目了然，但在合理的依次縮排之後還是很容易識別的；

5、容易編寫和解析，當然前提是你要知道資料結構；

json的優點：(摘自：

1、乙個眾所周知的問題，ajax直接請求普通檔案存在跨域無許可權訪問的問題，甭管你是靜態頁面、動態網頁、web服務、wcf，只要是跨域請求，一律不准；

2、不過我們又發現，web頁面上呼叫js檔案時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有"src"這個屬性的標籤都擁有跨域的能力，比如、

、）；3、於是可以判斷，當前階段如果想通過純web端（activex控制項、服務端**、屬於未來的html5之websocket等方式不算）跨域訪問資料就只有一種可能，那就是在遠端伺服器上設法把資料裝進js格式的檔案裡，供客戶端呼叫和進一步處理；

4、恰巧我們已經知道有一種叫做json的純字元資料格式可以簡潔的描述複雜資料，更妙的是json還被js原生支援，所以在客戶端幾乎可以隨心所欲的處理這種格式的資料；

5、這樣子解決方案就呼之欲出了，web客戶端通過與呼叫指令碼一模一樣的方式，來呼叫跨域伺服器上動態生成的js格式檔案（一般以json為字尾），顯而易見，伺服器之所以要動態生成json檔案，目的就在於把客戶端需要的資料裝入進去。

6、客戶端在對json檔案呼叫成功之後，也就獲得了自己所需的資料，剩下的就是按照自己需求進行處理和展現了，這種獲取遠端資料的方式看起來非常像ajax，但其實並不一樣。

7、為了便於客戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作jsonp，該協議的乙個要點就是允許使用者傳遞乙個callback引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住json資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

實現原理:

利用jquery的jsonp請求: 實現乙個簡單的**程式

$(function()", 
// datatype: 'json', 
datatype: 'jsonp',
jsonp: 'callback',
jsonpcallback: 'lottery' ,
cache: false,
// data: }'},
success:function(json) 
}); 
},error: function(), 
}); 
}});
});

django後台:

#
@csrf_exempt
deflottery(request):
prize_lst =,
'二等獎
': ,
'三等獎
': ,
'四等獎
': ,
'五等獎
': ,
'六等獎
': ,
'七等獎
': ,
}result_dic ={}
prize =get_rand_prize(prize_lst)
angle_min = prize_lst[prize]['
min'
] angle_max = prize_lst[prize]['
max'
] 
if prize == '
七等獎'

ajax與jsonp之間的區別:

1、ajax和jsonp這兩種技術在呼叫方式上「看起來」很像，目的也一樣，都是請求乙個url，然後把伺服器返回的資料進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；

2、但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過xmlhttprequest獲取非本頁內容，而jsonp的核心則是動態新增標籤來呼叫伺服器提供的js指令碼。

3、所以說，其實ajax與jsonp的區別不在於是否跨域，ajax通過服務端**一樣可以實現跨域，jsonp本身也不排斥同域的資料的獲取。

4、還有就是，jsonp是一種方式或者說非強制性協議，如同ajax一樣，它也不一定非要用json格式來傳遞資料，如果你願意，字串都行，只不過這樣不利於用jsonp提供公開服務。

(1). 在伺服器端啟用cors

(2). 讓無伺服器端用於處理jsonp的能力

這兩種方法區別是什麼？

(1) jsonp只支援get請求， cors則支援get, post, put, delete等標準方法

(2) 使用jsonp時，伺服器端處理客戶請求的callback引數，而使用cors則不需要

(3) jsonp從伺服器端獲取的是script檔案，而cors獲取是一段xml或者json或者其他格式檔案

(4) jsonp支援老實瀏覽器，而cors只支援現代瀏覽器

同源策略，跨域資源共享和JSONP

跨域資源共享

跨域資源共享 CORS

跨域資源共享 CORS

同源策略，跨域資源共享和JSONP

跨域資源共享

跨域資源共享 CORS

跨域資源共享 CORS

相關推薦