同源策略防跨域解決方案
跨域
由於同源策略導致的不同源網站間頁面腳本無法互相訪問。
同源策略
出於安全性考慮,一個網站的腳本不能訪問另一個網站的請求。除非它們的協議號,域名,端口號相同。
防跨域
同源策略條件過於嚴苛,很多網站都有子域名,這樣就造成了互相通信不便的問題。
解決方案
一.document.domain
document.domain只能實現一級域名相同的防跨域。
如:www.sojson.com 下指到sojson.com 是可以的。
icp.sojson.com 下指到 sojson.com 是可以的。
www.sojson.com 下指到 www.baidu.com 是不行的。
sojson.com 指到 baidu.com 還是不行的。
實例
1.需求:
比如我們要在當前頁面下,“www.sojson.com/shiro” 下上傳圖片到 "cdn.sojson.com/images/" 下去。直接搞肯定是不行的。
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
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)")
註意內容:
1、Ajax請求需要設置請求類型為Jsonp
dataType: "jsonp"
2、Ajax請求需要設置回調函數,當前函數值必須與服務器響應包含的callback名稱相同
jsonpCallback:"fn"
3、Ajax請求可以設置jsonp(可選),傳遞給請求處理程序或頁面,用以獲得jsonp回調函數名的參數名,默認為:callback
jsonp: "callback"
4、服務端返回Json數據必須使用jsonpCallback設置的值進行包裹
return HttpResponse("fn(outputData)")
三.CORS
cors只設置服務端允許白名單網站訪問即可。
# 服務器添加響應頭headers
Access-Control-Allow-Origin: http://a.com
補充:django-cors-headers
安裝
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
同源策略防跨域解決方案