跨域

由於同源策略導致的不同源網站間頁面腳本無法互相訪問。

同源策略

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

防跨域

同源策略條件過於嚴苛，很多網站都有子域名，這樣就造成了互相通信不便的問題。

解決方案

一.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

同源策略防跨域解決方案