跨域問題及其簡單的解決方案
阿新 • • 發佈:2019-01-06
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); } }
本人才疏學淺,如有紕漏多多指教!
@飛不高的鷹