因爲同源策略致使的不一樣源網站間頁面腳本沒法互相訪問。ajax
出於安全性考慮,一個網站的腳本不能訪問另外一個網站的請求。除非它們的協議號,域名,端口號相同。django
同源策略條件過於嚴苛,不少網站都有子域名,這樣就形成了互相通訊不便的問題。json
document.domain只能實現一級域名相同的防跨域。api
如:www.sojson.com 下指到sojson.com 是能夠的。跨域
icp.sojson.com 下指到 sojson.com 是能夠的。安全
www.sojson.com 下指到 www.baidu.com 是不行的。服務器
sojson.com 指到 baidu.com 仍是不行的。cookie
1.需求:cors
好比咱們要在當前頁面下,「www.sojson.com/shiro」 下上傳圖片到 "cdn.sojson.com/images/" 下去。直接搞確定是不行的。dom
2.在請求「www.sojson.com/shiro」 的時候,寫上以下代碼:
if(document.domain !='sojson.com'){ document.domain = 'sojson.com'; }
3.而後在上傳的地址「cdn.sojson.com」 的Iframe 文件內寫上同樣的代碼。
if(document.domain !='sojson.com'){ document.domain = 'sojson.com'; }
jsonp是利用script標籤沒有同源策略限制的屬性實現的。jsonp只能發送GET請求。
客戶端:
$.ajax({ url: "http://otherdomain.com/manage/role/get", async: false, type: "get", dataType: "jsonp", data:{ "id":1 }, jsonp: "callback", jsonpCallback:"fn", success: function(data){ alert(data.code); }, error: function(){ alert('fail'); } })
服務端:
return HttpResponse("fn(outputData)")
注意內容:
一、Ajax請求須要設置請求類型爲Jsonp
dataType: "jsonp"
二、Ajax請求須要設置回調函數,當前函數值必須與服務器響應包含的callback名稱相同
jsonpCallback:"fn"
三、Ajax請求能夠設置jsonp(可選),傳遞給請求處理程序或頁面,用以得到jsonp回調函數名的參數名,默認爲:callback
jsonp: "callback"
四、服務端返回Json數據必須使用jsonpCallback設置的值進行包裹
return HttpResponse("fn(outputData)")
cors只設置服務端容許白名單網站訪問便可。
# 服務器添加響應頭headers Access-Control-Allow-Origin: http://a.com
安裝
pip install django-cors-headers
添加應用
INSTALLED_APPS = ( ... 'corsheaders', ... )
中間層設置
MIDDLEWARE = [ // 必須在最前面 只有容許跨域請求,後面的中間件才能被執行 'corsheaders.middleware.CorsMiddleware', ... ]
添加白名單
# CORS CORS_ORIGIN_WHITELIST = ( '127.0.0.1:8080', 'localhost:8080', 'www.meiduo.site:8080', 'api.meiduo.site:8000' )
CORS_ALLOW_CREDENTIALS = True # 容許攜帶cookie