同源策略防跨域解決方案

跨域

因爲同源策略致使的不一樣源網站間頁面腳本沒法互相訪問。ajax

同源策略

出於安全性考慮,一個網站的腳本不能訪問另外一個網站的請求。除非它們的協議號,域名,端口號相同。django

防跨域

同源策略條件過於嚴苛,不少網站都有子域名,這樣就形成了互相通訊不便的問題。json

解決方案

一.document.domain

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

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

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

相關文章
相關標籤/搜索