1. 程式人生 > >跨域問題及其簡單的解決方案

跨域問題及其簡單的解決方案

1、什麼是跨域

      當請求不同域名下的資源時,就會產生跨域請求問題。

2、跨域請求的產生的原因

      瀏覽器的同源策略造成了跨域問題(同源策略嚴格限制不同域名下的文件、指令碼之間的互動)。

3、JSONP原理

  首先,在客戶端註冊一個callback (如:'jsoncallback'), 然後把callback的名字(如:jsonp1236827957501)傳給伺服器。

      注意:服務端得到callback的數值後,要用jsonp1236827957501(......)把將要輸出的json內容包括起來,此時,

       伺服器生成 json 資料才能被客戶端正確接收。

      然後,以 javascript 語法的方式,生成一個function , function 名字就是傳遞上來的引數 'jsoncallback'的值 jsonp1236827957501 .

      最後將 json 資料直接以入參的方式,放置到 function 中,這樣就生成了一段 js 語法的文件,返回給客戶端,  客戶端瀏覽器,解析script標籤,

      並執行返回的 javascript 文件,此時javascript文件資料,作為引數,

      傳入到了客戶端預先定義好的 callback 函式(如上例中jquery $.ajax()方法封裝的的success: function (json))裡.(動態執行回撥函式)

4、跨域問題如何解決

     現在基於前端Jquery中的ajax方法和後臺的SpringMVC框架做一個簡要的說明

     前端的程式碼:

     <script>
function test() {
$.ajax({
url:"../../login/getCash.do",
type:"get",
jsonp:"callback",
async: false,
jsonpCallback:"fun1",
dataType:"jsonp",
success:function(data) {
//回撥方法
                                        //data是伺服器端返回的資料
},
error:function(){
}
				
});
}
		//這個是本地自定義的回撥函式,可以省略,直接在ajax的回撥方法裡實現業務邏輯
function fun1(fun) {
alert(fun);
}
</script>

      後臺程式碼:

        @RequestMapping(value="/getCash.do")
@ResponseBody
public void getAcccountJsonP(HttpServletRequest request, HttpServletResponse res, String callback) {
Result result = this.getResult();
Map<String, Long> mm = null;
 
try {
if (StringUtils.isNoneEmpty(callback)) {
result = externService.getAccountInfo(result, 2);//result.getUserInfo().getUserId());
mm = result.getData();
} else {
//do nothing
callback = "unknow";
}
//設定返回格式
res.setContentType("text/plain"); 
res.getWriter().write(callback + "("+JSONObject.toJSONString(mm)+")");
}catch(Exception e) {
result = this.error(result, e);
}finally {
this.send(result);
}
}
     
   本人才疏學淺,如有紕漏多多指教!
   @飛不高的鷹