跨域請求解決方案

在前端開發過程中，難免和服務端產生資料互動。一般情況我們的請求分為這麼幾種情況：

只關注傳送，不關注接收

不僅要傳送，還要關注服務端返回的資訊

上面提到了乙個概念，我們這裡簡單做一下講解。什麼叫做跨域？一般情況下，跨域分為三種情況：跨協議、跨子域、跨網域名稱。下面距離梳理一下這三種情況。

我們需要知道的是，跨域請求只要滿足這是三種情況之一就會被認定為跨域請求。

目前流行比較廣的跨域請求解決方案有：window.name、document.domain、服務端**、jsonp、前端**。

以下介紹的方式只是實現原理，沒有過多考慮安全性，可以根據自己的情況進行選擇。

前端傳送乙個請求給隱藏的iframe，然後服務端每次將返回值，以js形式返回，然後iframe的父視窗獲取window.name的值。服務端返回資料形式為：

2014-11-18：

@pyzy：window.name的值必須是字串，需要使用json.stringify處理傳遞，獲取之後可以用json.parse處理進行使用

這個使用限制條件較多，必須是不同子域間，協議和埠號必須相同。比如：a.12306.cn和b.12306.cn之間相互操作，可以分別在兩個網域名稱下定義：document.domain = '12306.cn'; 這樣就實現了跨子域通訊。

這種情況不適合跨協議通訊，比較適合跨埠和跨網域名稱。這個前端基本上相當於普通的請求，我們所要訪問的介面都經過服務端的**，我們訪問的請求都是本域的。

我們用的比較多，原理就是在發起請求時，動態的在頁面載入乙個script標籤，因為src可以接收跨域資源，然後這個script標籤的資源是執行乙個js方法，並且將服務端返回的資料作為引數傳遞過來。這種情況唯一的缺點就是只能傳送get請求，不適用用post請求。jsonp返回的資料格式為：

callback();

和window.name的實現比較類似，將請求傳送到乙個隱藏的iframe，然後服務端返回類似這樣的內容：

然後proxy檔案，接收到這些引數，進行處理，轉化成類似與jsonp的返回值，執行頁面上的**。這種情況是可以傳送post請求的。

proxy檔案的內容，如下：

通過上面的介紹，簡單的知道了處理跨域請求的一些方法，下面整理了乙個基於jquery的，解決跨域的方法。

$(function()  param 要提交的資料
* @param  [ajaxopt] ajax配置
* @param  [https=false] 是否使用https協議
}	$.extend(sync.prototype,  [url] 請求鏈結
* @return  promise物件
*/get: function(url) );
},/**
* 通過post方式提交，依賴psp_jump.html檔案
* @param  [url] 請求鏈結
* @return  promise物件
*/post: function(url) , this.param, );
var form = buildform(param, );
window[funname] = function (data))|(\[.*\])$/)) 
data[i] = value;}}
deferred.resolve(data);
};timer = settimeout(function());
}, this.ajaxopt.timeout);
// do some clear
deferred.always(function(data)  catch (e)
});$(form).submit();
return deferred.then(this.done);
},/**
* 收到響應時預設**
* @param  data 資料
* @return 
*/done: function (data)  else 
return deferred.promise();
},/**
* 未收到響應時預設**
* @param  error 錯誤資訊
* @return 
*/fail: function(error) );
return deferred.promise();
}	});
/*** 把資料物件轉成form元素
* @param  data json資料
* @param  opts form所需引數或其他資料
* @return 
*/function buildform(data, opts) 
opts.method = 'post';
var $form = $('').attr(opts).hide();
$.each(data, function (name, value) );
return $form[0];	}	
window.sync = sync;
});

這樣我們就可以通過一下方式進行使用：

var login = function(data) 
login()
.done(function() )
.fail(function(error) );

至此就可以做到跨域請求了~

跨域請求解決方案

跨域請求解決方案

跨域請求解決方案

JS跨域請求解決方案

相關推薦