因?yàn)闉g覽器的同源策略限制，不是同源的腳本不能操作其他源下面的資源，想操作另一個(gè)源下面的資源就屬于跨域了，這里說的跨域是廣義跨域，我們常說的代碼中請(qǐng)求跨域，是狹義的跨域，即在腳本代碼中向非同源域發(fā)送http請(qǐng)求

瀏覽器的同源策略（SOP/same origin policy）是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS（跨站腳本攻擊 cross site scripting）和CSRF（跨站請(qǐng)求偽造cross-site request forgery）等攻擊。

（同源 origin：協(xié)議，域名，端口號(hào)，不清楚的話，直接在瀏覽器控制臺(tái)中輸入window.location.origin看看返回值就知道了。）

下面兩種情況，是不受跨域限制的，嚴(yán)格來講，這兩種情況只是跨站資源請(qǐng)求：

1）頁面中的鏈接，重定向及表單提交是不受同源策略限制的

2）跨域資源的引入，如<script src=""> <image src=""> <iframe>等

從上面的第二種情況，我們可以發(fā)現(xiàn)，但凡通過src去獲取非同源狀態(tài)的資源時(shí)，都是不受跨域限制的，那我們就可以想想，是否可以借助這種跨站資源請(qǐng)求的方式來實(shí)現(xiàn)http跨域請(qǐng)求呢？這就是我們接下來要說的第一種跨域解決方案：jsonp

1、JSONP（不僅限于python，所有的GET請(qǐng)求都可以使用jsonp實(shí)現(xiàn)跨域）

1）實(shí)現(xiàn)原理：

從上面的分析我們已經(jīng)知道，web頁面上請(qǐng)求跨站資源請(qǐng)求是不會(huì)受到同源策略限制的，所有我們會(huì)想，我們可不可以在服務(wù)器上想辦法把web端需要的數(shù)據(jù)裝進(jìn)一個(gè)js文件里面，然后讓web端直接訪問這個(gè)js文件，從而獲取需要的數(shù)據(jù)呢？恰巧我們知道有一種叫做json的數(shù)據(jù)格式，且js原生支持，所以web端就可以通過像訪問js腳本一樣的方式，來調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js文件。

為了便于客戶端使用數(shù)據(jù)，逐漸形成一種非正式傳輸協(xié)議：JSONP。JSONP的一個(gè)要點(diǎn)就是，傳給服務(wù)器一個(gè)callback參數(shù)，然后服務(wù)器返回?cái)?shù)據(jù)時(shí)，將這個(gè)callback參數(shù)作為函數(shù)名來包裹住json數(shù)據(jù)

2）jsonp實(shí)例

在遠(yuǎn)程服務(wù)器上新建一個(gè)remote.js文件：

HandleRemote({"title":"哈哈", "name":"我是一個(gè)測(cè)試數(shù)據(jù)哦！"})

在本地新建html文件:

function HandleRemote(data){
console.log(data.title+data.name);
}
<script type="text/javascript" src="遠(yuǎn)程服務(wù)器地址/remote.js">

運(yùn)行本地文件，在瀏覽器的控制臺(tái)可以看到 哈哈我是一個(gè)測(cè)試數(shù)據(jù)哦！ 的輸出

到現(xiàn)在我們已經(jīng)實(shí)現(xiàn)了去服務(wù)器上獲取數(shù)據(jù)，剩下還有兩個(gè)問題需要我們思考：

a、我們?nèi)绾巫屵h(yuǎn)程服務(wù)器知道他要調(diào)用的本地函數(shù)回調(diào)函數(shù)的名字是什么？

b、我們?nèi)绾卧谶h(yuǎn)程服務(wù)器上動(dòng)態(tài)生成js腳本

有了思路就很好辦了，先看第一個(gè)問題：

我們?nèi)绾巫尫?wù)器知道我們本地的回調(diào)函數(shù)名？告訴他就行了啊，在請(qǐng)求中加上我們的函數(shù)名，然后讓遠(yuǎn)程服務(wù)器根據(jù)我們的參數(shù)取動(dòng)態(tài)生成js腳本調(diào)用函數(shù)名即可！

前端實(shí)現(xiàn)

var url = "http://test.com/getRemoteDate?callback=HandleRemote"
var script = document.createElement("script");
script.setAttribute("src", url)
document.getElementByTagName("head")[0].appendChild(script);

最后將上面的代碼封裝成通用的ajax形式：

url = "http://test.com/getRemoteDate/";
$.ajax({
url:url,
type:"GET",
dataType:"JSONP",
jsonp:"callback",　#將會(huì)作為參數(shù)傳給服務(wù)器，用于獲得回調(diào)函數(shù)的參數(shù)名
jsonCallback:"test",　# 自定義的jsonp的回調(diào)函數(shù)參數(shù)名，默認(rèn)為jQuery自動(dòng)生成的函數(shù)名，也可以自定義，jQuery會(huì)自動(dòng)為你處理的。
success:function(data){
此處data即為返回的json數(shù)據(jù)了，前端根據(jù)需要自行處理
}　
});

服務(wù)端代碼 ：

def getData():
return {"title":"哈哈", "name":"這又是一個(gè)測(cè)試數(shù)據(jù)哦！"}
def getRemote(request):
funcName = request.GET.get("callback")
result = getData()
# 將結(jié)果以json形式返回，與前端的jsonp交互
return funcName+"("+json.dumps(result)+")"

配置url：

url(r"^getRemoteData/$", getRemote)

到這里，jsonp就完成了，雖然jsonp不受同源策略的限制，但是jsonp有個(gè)問題，就是它只支持GET請(qǐng)求，其他請(qǐng)求不支持。

2、在響應(yīng)頭加上響應(yīng)的允許跨域的參數(shù)，告訴瀏覽器當(dāng)前請(qǐng)求被服務(wù)器接受，這種跨域方式也是通用的。

3、python Django中最常用的另一種處理跨域的方式：

使用Django提供的 Django-cors-headers 來處理跨域

從GitHub上面下載Django-cors-headers

pip install Django-cors-headers.zip

在settings.py中的中間件中配置 【'corsheaders.middleware.CorsMiddleware',】記得這個(gè)中間件一定要寫在CSRF之前，為了方便處理，一般寫在最前面

設(shè)置 CORS_ORIGIN_ALLOW_ALL = True，即允許所有的跨域請(qǐng)求，當(dāng)然，這里也可以設(shè)置為False，然后配合 CORS_ORIGIN_WHITELIST 白名單來使用

如此，我們的跨域處理即完成，支持所有的請(qǐng)求。

補(bǔ)充知識(shí)：python WSGI 解決跨域問題

import json
from wsgiref.simple_server import make_server

# application()函數(shù)是Python中符合WSGI標(biāo)準(zhǔn)的一個(gè)HTTP處理函數(shù),返回是一個(gè)字符串
def application(environ, start_response):
 # start_response 如下調(diào)用就會(huì)發(fā)送HTTP響應(yīng)的Header，注意只能調(diào)用一次start_response()函數(shù)發(fā)送Header。
 # start_response 函數(shù)兩個(gè)參數(shù)，一是HTTP響應(yīng)碼，一是一組list表示的HTTP Header，每個(gè)Header用一個(gè)包含兩個(gè)str的數(shù)組表示
 status = '200 OK'
 # response_headers 中添加請(qǐng)求頭部 ，解決跨域問題 
 response_headers = [('Content-type', 'application/json'),
   ('Access-Control-Allow-Origin', '*'),
   ('Access-Control-Allow-Methods', 'POST'),
   ('Access-Control-Allow-Headers', 'x-requested-with,content-type'),
   ] # json 
 start_response(status, response_headers)
 result = {'code': 200, 'message': "You get the flag"}
 return [result.encode()]
 
if __name__ == "__main__":
 port = 8091
 httpd = make_server("127.0.0.1", port, application)
 print("serving http on port {0}...".format(str(port)))
 httpd.serve_forever()

以上這篇關(guān)于python 跨域處理方式詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論