spring mvc ajax jsonp 跨域請求返回值配置

阿新 • • 發佈：2019-02-16

背景：

AJAX向後臺（springmvc）傳送請求，報錯：已阻止交叉源請求：同源策略不允許讀取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的遠端資源。可

以將資源移動到相同的域名上或者啟用 CORS 來解決這個問題。

百度一下，發現是遇到了跨域請求請求問題。蒐集資料如下

JSONP解釋

在解釋JSONP之前,我們需要了解下”同源策略“這個概念,這對理解跨域有幫助。基於安全的原因,瀏覽器是存在同源策略機制的,同源策略阻止從一個源載入的文件或指令碼獲取或設定另一個源載入額文件的屬性。有點繞,說的簡單點就是瀏覽器限制指令碼只能和同協議、同域名、同埠的指令碼進行互動。

JSONP就是為了解決這一問題的,JSONP是英文JSON with Padding的縮寫,是一個非官方的協議。他允許服務端生成script tags返回值客戶端,通過javascript callback的形式來實現站點訪問。JSONP是一種script tag的注入,將server返回的response新增到頁面是實現特定功能。

簡而言之,JSONP本身不是複雜的東西,就是通過scirpt標籤對javascript文件的動態解析繞過了瀏覽器的同源策略。

JSONP原理及實現

接下來,來實際模擬一個跨域請求的解決方案。後端為Spring MVC架構的,前端則通過Ajax進行跨域訪問。

1、首先客戶端需要註冊一個callback(服務端通過該callback(jsonp)可以得到js函式名(jsonpCallback))，然後以JavaScript語

法的方式,生成一個function

2、接下來,將JSON資料直接以入參的方式,放置到function中,這樣就生成了一段js語法文件,返回給客戶端。

3、最後客戶端瀏覽器動態的解析script標籤,並執行返回的JavaScript語法文件片段,此時資料作為引數傳入到了預先定義好的

回撥函式裡(動態執行回撥函式)。

這種動態解析js文件和eval函式是類似的。

經過一番努力，解決如下：

SpringMVC端：

 @RequestMapping("/get")  
     public void get(HttpServletRequest req,HttpServletResponse res) {  
         res.setContentType("text/plain");  
         String callbackFunName =req.getParameter("callbackparam");//得到js函式名稱  
         try {  
             res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp資料  
         } catch (IOException e) {  
             e.printStackTrace();  
         }  
     }  
       
     @RequestMapping("/getJsonp")  
     @ResponseBody  
     public JSONPObject getJsonp(String callbackparam){  
    Company company=new Company();  
    company.setAddress("廣州天河華景軟體園");  
    company.setEmail(" 
[email protected]");  
    company.setName("廣州訊動網路可以有限公司");  
    company .setPhone("12345678912");  
      return new JSONPObject(callbackparam, company);   
     }

AJAX端：

 <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>  
    <script>  
    $(document).ready(function(){  
          
          
    $("#but1").click(function(){  
         $.ajax({  
            url:'http://127.0.0.1:8080/DevInfoWeb/get',  
            type: "get",  
            async: false,  
            dataType: "jsonp",  
            jsonp: "callbackparam", //服務端用於接收callback呼叫的function名的引數   
            jsonpCallback: "success_jsonpCallback", //callback的function名稱,服務端會把名稱和data一起傳遞回來   
            success: function(json) {  
             alert(json);  
            },  
            error: function(){alert('Error');}  
    });  
    });  
      
      
    $("#but2").click(function(){  
         $.ajax({  
            url:'http://127.0.0.1:8080/DevInfoWeb/getJsonp',  
            type: "get",  
            async: false,  
            dataType: "jsonp",  
            jsonp: "callbackparam", //服務端用於接收callback呼叫的function名的引數   
            jsonpCallback: "success_jsonpCallback", //callback的function名稱,服務端會把名稱和data一起傳遞回來   
            success: function(json) {  
             alert(json);  
            },  
            error: function(){alert('Error');}  
    });  
    });  
      
      
    });  
    </script>  
    </head>  
    <body>  
      
    <div id="div1"><h2>使用 jQuery AJAX 來改變文字</h2></div>  
    <button id="but1">按鈕1</button> <br/>  
    <button id="but2">按鈕2</button>  
      
    </body>  
    </html>

參考文章：

spring mvc ajax jsonp 跨域請求返回值配置

背景：

AJAX向後臺（springmvc）傳送請求，報錯：已阻止交叉源請求：同源策略不允許讀取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的遠端資源。可

以將資源移動到相同的域名上或者啟用 CORS 來解決這個問題。

JSONP解釋

JSONP原理及實現

spring mvc ajax jsonp 跨域請求返回值配置

Spring Boot支援JSONP跨域請求資料(Ajax的jsonp)

spring mvc支持跨域請求

Ajax-jsonp跨域請求簡單樣例

jQuery jsonp跨域請求 ajax跨域之---伺服器端代理實現

js原生態跨域請求與ajax中jsonp跨域請求

JQuery+ajax+jsonp 跨域訪問

jsonp跨域請求

jQuery jsonp跨域請求詳解

【轉載】Ajax JS 跨域請求

ajax本地跨域請求以及解決方法

jsonp跨域請求php接口

輕松搞定JSONP跨域請求

jsonp跨域請求,常見的集中書寫方式,及優缺點比較

[jQuery] jsonp跨域請求

轉-jQuery jsonp跨域請求

jQuery jsonp跨域請求 jQuery jsonp跨域請求

Spring MVC 登陸實現跨域

jsonp跨域請求報錯Uncaught SyntaxError: Unexpected token :

php ajax jsonp 跨域兩種方式

spring mvc ajax jsonp 跨域請求 返回值 配置

背景：

AJAX向後臺（springmvc）傳送請求，報錯：已阻止交叉源請求：同源策略不允許讀取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的遠端資源。可

以將資源移動到相同的域名上或者啟用 CORS 來解決這個問題。

JSONP解釋

JSONP原理及實現

相關推薦

spring mvc ajax jsonp 跨域請求返回值配置