跨域請求小總結

跨域請求，顧名思義就是請求不在同一個域名裏的內容，出於瀏覽器安全策略，這種請求多半會被拒絕。那麼，咱們如何避免因爲跨域形成的請求失敗呢？

1.jsonp

這是一種僅適用於get請求方式的跨域解決方案，咱們知道，JavaScript的script標籤是不存在跨域請求不被容許的狀況的，jsonp就是利用這一屬性來實現不在同一域名的內容的請求的。

jQuery中對該方法說明以下： 若是獲取的數據文件存放在遠程服務器上（域名不一樣，也就是跨域獲取數據），則須要使用jsonp類型。使用這種類型的話，會建立一個查詢字符串參數 callback=? ，這個參數會加在請求的URL後面。服務器端應當在JSON數據前加上回調函數名，以便完成一個有效的JSONP請求。意思就是遠程服務端須要對返回的數據作下處理，根據客戶端提交的callback的參數，返回一個callback(json)的數據，而客戶端將會用script的方式處理返回數據，來對json數據作處理。JQuery.getJSON也一樣支持jsonp的數據方式調用。

eg：

   客戶端JQuery.ajax的調用代碼示例：

$.ajax({
	type : "get",
	async:false,
	url : "http://www.xxx.com/ajax.do",
	dataType : "jsonp",
	jsonp: "callbackparam",//服務端用於接收callback調用的function名的參數
	jsonpCallback:"success_jsonpCallback",//callback的function名稱
	success : function(json){
		alert(json);
		alert(json[0].name);
	},
	error:function(){
		alert('fail');
	}
});

    服務端返回數據的示例代碼：

public void ProcessRequest (HttpContext context) {
	context.Response.ContentType = "text/plain";
	String callbackFunName = context.Request["callbackparam"];
	context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}

2.代理

這個也能夠說是服務器跨域，就是由後臺去跨域，而後把內容在同域中由服務器傳給前端，這是經過繞過前端瀏覽器來解決跨域請求問題。

3.CORS

Cross-Origin Resource Sharing(跨域資源共享)是一種容許當前域（origin）的資源（好比html/js/web service）被其餘域（origin）的腳本請求訪問的機制。這是現代瀏覽器的一種實現方式。

eg：

Access-Control-Allow-Origin:*;//容許全部來源訪問

Access-Control-Allow-Method:POST,GET;//容許訪問的方式

前端代碼：

//http://127.0.0.1:8888/cors.html
var xhr = new XMLHttpRequest();
xhr.onload = function(data){
  var _data = JSON.parse(data.target.responseText)
  for(key in _data){
    console.log('key: ' + key +' value: ' + _data[key]);
  }
};
xhr.open('POST','http://127.0.0.1:2333/cors',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send();

後端代碼：

//http://127.0.0.1:2333/cors
app.post('/cors',(req,res) => {
  if(req.headers.origin){
    res.writeHead(200,{
      "Content-Type": "text/html; charset=UTF-8",
      "Access-Control-Allow-Origin":'http://127.0.0.1:8888'
    });
    let people = {
      type : 'cors',
      name : 'weapon-x'
    }
    res.end(JSON.stringify(people));
  }
})

4.CSST

一種用 CSS 跨域傳輸文本的方案。相比 JSONP 更爲安全，不須要執行跨站腳本。

連接：csst

5.postmessage跨域

在HTML5中新增了postMessage方法，postMessage能夠實現跨文檔消息傳輸（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。 該方法能夠經過綁定window的message事件來監聽發送跨文檔消息傳輸內容。 使用postMessage實現跨域的話原理就相似於jsonp，動態插入iframe標籤，再從iframe裏面拿回數據