使用JSONP解決ajax跨域

在平常開發中，難免遇到跨域的問題。在這裏咱們介紹使用Jsonp來解決ajax跨域的問題

什麼是跨域?

跨域，指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器施加的安全限制。簡單的理解就是開發時當客戶端所在的工程與服務端的ip不一樣或者端口不一樣時進行請求，就產生了跨域，進而不能請求數據。

什麼是JSONP?

官方的說法是:JSONP(JSON with Padding)是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。
咱們都知道，JSON是一種數據交換格式。而JSONP是一種的數據調用方式。它利用<script>標籤能夠跨域的特性，將須要跨域獲取的數據包在<script>標籤中來達到目的。當咱們須要使用JSONP時，客戶端調用服務端時傳遞一個callback，這樣服務端根據callback的有無就能夠判斷是否須要使用JSONP。能夠簡單的理解爲帶callback的json就是jsonp。

JSONP的使用

AJAX的使用與日常無異，只須要將dataType改成jsonp便可

$.ajax({
            url : url,
            dataType : "jsonp",
            type : "GET",
            success : function(data){
                ...
            }
        });

服務端接收到之後，只須要手動判斷一下有無callback再手動拼一對括號便可,這裏以java爲例

@ResponseBody
    @RequestMapping(value="xxx")
    public String testJsonp(String callback) {
        Student result = new Student();
        //響應結果以前，判斷是否爲jsonp請求
        if (StringUtils.isNotBlank(callback)) {
            //把結果封裝成一個js語句響應
            return callback + "(" + JsonUtils.objectToJson(result)  + ");";
        }
        return JsonUtils.objectToJson(result);
    }

在Spring 4.1以上的版本也可使用MappingJacksonValue來響應

@ResponseBody
    @RequestMapping(value="xxx")
    public Object testJsonp(String callback) {
        Student result = new Student();
        //響應結果以前，判斷是否爲jsonp請求
        if (StringUtils.isNotBlank(callback)) {
            //把結果封裝成一個js語句響應
            MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
            mappingJacksonValue.setJsonpFunction(callback);
            return mappingJacksonValue;
        }
        return result;
    }

怎麼樣，簡單幾步就能夠跨域來訪問服務端了。

---

本文做者： catalinaLi
本文連接： http://catalinali.top/2018/us... 版權聲明： 原創文章，有問題請評論中留言。非商業轉載請註明做者及出處。