【原】Java跨域以及實現原理

    前言：最近研究了一下跨域,主要是jsonp的實現,經過測試后總結如下：

　　一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不准。下面我就用8080端口請求8081的接口看看會提示什么吧?

 

如上圖所示，已經被瀏覽器攔截了,所以現在我們需要換jsonp的方法來獲取服務器返回的數據。

服務端的接口如下：

@RequestMapping(value ="/hello", method = RequestMethod.GET)
    @ResponseBody
    public String hello(HttpServletRequest request){
        Map<String, String> map = new HashMap<String, String>();
        map.put("result", "content");
        JSONObject resultJSON = JSONObject.fromObject(map); // 根據需要拼裝json
        String jsonpCallback = request.getParameter("jsonpCallback");
        // 返回jsonp格式數據
        System.out.println(jsonpCallback + "(" + resultJSON.toString(1, 1) + ")");
        return jsonpCallback + "(" + resultJSON.toString(1, 1) + ")";
    }

拼接的格式為：jQuery164006948568608122441_1476774974068({"result": "content"})  其實就是在json外面包了一下而已,這樣在ajax就能正常得到json里面的數據了

 

 

 

這里給貼上JSON和JSONP的格式以便大家對比：

{
    "message":"獲取成功",
    "state":"1",
    "result":{"name":"工作組1","id":1,"description":"11"}
}

callback({
    "message":"獲取成功",
    "state":"1",
    "result":{"name":"工作組1","id":1,"description":"11"}
})

 

    盡管實現了跨域的功能，但是一直好奇為什么jsonp就能得到數據了呢，帶着好奇我開始在網上查閱資料並自己動手實踐和理解,最終明白了內部運作原理。首先可以發現在引入外部的css或者js的時候是不會受到瀏覽器攔截的,比如src沒有受到跨域的影響，那么jsonp是否是利用這個原理呢？答案是的,JSONP就是利用動態生成的js格式文件把數據裝進去傳給客戶端進行解析。

   下面是sonp客戶端實現的核心部分實例,通過js組裝<script type="text/javascrtpt" src="http://xxx.xxx.com？callback=xxx">的js片段,通過src不受跨域影響的原理把需要訪問的接口地址set 到src。

 // 提供jsonp服務的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
            var url = "http://localhost:8080/hello?callback=flightHandler";
            // 創建script標簽，設置其屬性
            var script = document.createElement('script');
            script.setAttribute('src', url);
            // 把script標簽加入head，此時調用開始
            document.getElementsByTagName('head')[0].appendChild(script);