因為瀏覽器的同源策略限制,不是同源的腳本不能操作其他源下面的資源,想操作另一個源下面的資源就屬於跨域了,這里說的跨域是廣義跨域,我們常說的代碼中請求跨域,是狹義的跨域,即在腳本代碼中向非同源域發送http請求
瀏覽器的同源策略(SOP/same origin policy)是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到XSS(跨站腳本攻擊 cross site scripting)和CSRF(跨站請求偽造cross-site request forgery)等攻擊。
(同源 origin:協議,域名,端口號,不清楚的話,直接在瀏覽器控制台中輸入window.location.origin看看返回值就知道了。)
下面兩種情況,是不受跨域限制的,嚴格來講,這兩種情況只是跨站資源請求:
1)頁面中的鏈接,重定向及表單提交是不受同源策略限制的
2)跨域資源的引入,如<script src=""> <image src=""> <iframe>等
從上面的第二種情況,我們可以發現,但凡通過src去獲取非同源狀態的資源時,都是不受跨域限制的,那我們就可以想想,是否可以借助這種跨站資源請求的方式來實現http跨域請求呢?這就是我們接下來要說的第一種跨域解決方案:jsonp
1、JSONP(不僅限於python,所有的GET請求都可以使用jsonp實現跨域)
1)實現原理:
從上面的分析我們已經知道,web頁面上請求跨站資源請求是不會受到同源策略限制的,所有我們會想,我們可不可以在服務器上想辦法把web端需要的數據裝進一個js文件里面,然后讓web端直接訪問這個js文件,從而獲取需要的數據呢?恰巧我們知道有一種叫做json的數據格式,且js原生支持,所以web端就可以通過像訪問js腳本一樣的方式,來調用跨域服務器上動態生成的js文件。
為了便於客戶端使用數據,逐漸形成一種非正式傳輸協議:JSONP。JSONP的一個要點就是,傳給服務器一個callback參數,然后服務器返回數據時,將這個callback參數作為函數名來包裹住json數據
2)jsonp實例
在遠程服務器上新建一個remote.js文件:
HandleRemote({"title":"哈哈", "name":"我是一個測試數據哦!"})
在本地新建html文件:
function HandleRemote(data){
console.log(data.title+data.name);
}
<script type="text/javascript" src="遠程服務器地址/remote.js">
運行本地文件,在瀏覽器的控制台可以看到 哈哈我是一個測試數據哦! 的輸出
到現在我們已經實現了去服務器上獲取數據,剩下還有兩個問題需要我們思考:
a、我們如何讓遠程服務器知道他要調用的本地函數回調函數的名字是什么?
b、我們如何在遠程服務器上動態生成js腳本
有了思路就很好辦了,先看第一個問題:
我們如何讓服務器知道我們本地的回調函數名?告訴他就行了啊,在請求中加上我們的函數名,然后讓遠程服務器根據我們的參數取動態生成js腳本調用函數名即可!
前端實現
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", #將會作為參數傳給服務器,用於獲得回調函數的參數名
jsonCallback:"test", # 自定義的jsonp的回調函數參數名,默認為jQuery自動生成的函數名,也可以自定義,jQuery會自動為你處理的。
success:function(data){
此處data即為返回的json數據了,前端根據需要自行處理
}
});
服務端代碼 :
def getData():
return {"title":"哈哈", "name":"這又是一個測試數據哦!"}
def getRemote(request):
funcName = request.GET.get("callback")
result = getData()
# 將結果以json形式返回,與前端的jsonp交互
return funcName+"("+json.dumps(result)+")"
配置url: url(r"^getRemoteData/$", getRemote)
到這里,jsonp就完成了,雖然jsonp不受同源策略的限制,但是jsonp有個問題,就是它只支持GET請求,其他請求不支持。
2、在響應頭加上響應的允許跨域的參數,告訴瀏覽器當前請求被服務器接受,這種跨域方式也是通用的。

3、python Django中最常用的另一種處理跨域的方式:
使用Django提供的 Django-cors-headers 來處理跨域
從GitHub上面下載Django-cors-headers
pip install Django-cors-headers.zip
在settings.py中的中間件中配置 【'corsheaders.middleware.CorsMiddleware',】記得這個中間件一定要寫在CSRF之前,為了方便處理,一般寫在最前面
設置 CORS_ORIGIN_ALLOW_ALL = True,即允許所有的跨域請求,當然,這里也可以設置為False,然后配合 CORS_ORIGIN_WHITELIST 白名單來使用
如此,我們的跨域處理即完成,支持所有的請求。
