JSONP 跨域問題

JSONP跨域請求

 

什麼是跨域：

一、域名不一樣

二、域名相同端口不一樣

js出於對安全考慮不支持跨域請求。咱們可使用JSONP解決跨域問題。

1、JSONP是什麼

JSONP(JSON with Padding)是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略，通常來講位於 server1.example.com 的網頁js是沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

原理：瀏覽器在js請求中，是容許經過script標籤的src跨域請求，能夠在請求的結果中添加回調方法名，在請求頁面中定義方法，既可獲取到跨域請求的數據。（js請求的不是一個單純的json數據而是一段包含json數據的js腳本）

 

2、模擬JSONP

服務器域名：http://localhost:8081/rest/itemcat/list

客戶端服務器：http://localhost:8082/test.html

一、普通的JS跨域請求

服務器數據：

客戶端請求代碼：

    $(function(){
        $.ajax(
                {url: "http://localhost:8081/rest/itemcat/list?callback=myFunction", 
                 success: function(data){
                     console.info(data)
          }}); 
    });
    

結果

XMLHttpRequest cannot load http://localhost:8081/rest/itemcat/list?callback=myFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

二、模擬JSONP請求

客戶端請求代碼：

$(function(){
        greateScript("http://localhost:8081/rest/itemcat/list");
        function greateScript(src) {
            $("<script><//script>").attr("src", src).appendTo("body")
        } 
    });

結果：

list?_=1488425374097:1 Uncaught SyntaxError: Unexpected token :

 

3、使用JSONP

環境：

　　服務器域名：http://localhost:8081/rest/itemcat/list

　　客戶端服務器：http://localhost:8082/test.html

服務端代碼（本人使用springmvc4）：

@RequestMapping("/itemcat/list")
    @ResponseBody
    public Object getItemCatList(String callback) {
        CatResult catResult = itemCatService.getItemCatList();
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
        //設置JSONP回調函數
        mappingJacksonValue.setJsonpFunction(callback);
        return mappingJacksonValue;
    }

客戶端調用代碼：

$(function(){
        $.ajax(
            {   url: "http://localhost:8081/rest/itemcat/list", 
                dataType: "jsonp",
                jsonp: "callback",
                success: function(data){
                console.info(data)
          }});  
    });

結果：

 

看返回結果能夠發現返回的數據不是一段單純的json數據，而是一段js函數。