快捷導(dǎo)航

詳解SpringBoot多跨域請求的支持（JSONP）

更新時間：2017年04月11日 09:36:11 作者：木葉之榮

跨域是很多項目需要遇到的文章，本篇文章主要介紹了詳解SpringBoot多跨域請求的支持（JSONP），具有一定的參考價值，有興趣的可以了解一下

在我們做項目的過程中，有可能會遇到跨域請求，所以需要我們自己組裝支持跨域請求的JSONP數(shù)據(jù)，而在4.1版本以后的SpringMVC中，為我們提供了一個AbstractJsonpResponseBodyAdvice的類用來支持jsonp的數(shù)據(jù)（SpringBoot接收解析web請求是依賴于SpringMVC實現(xiàn)的）。下面我們就看一下怎么用AbstractJsonpResponseBodyAdvice來支持跨域請求。

使用AbstractJsonpResponseBodyAdvice來支持跨域請求很簡單，只需要繼承這個類就可以了。具體代碼如下：

package com.zkn.learnspringboot.config; 
 
import org.springframework.web.bind.annotation.ControllerAdvice; 
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice; 
 
/** 
 * Created by wb-zhangkenan on 2016/12/1. 
 */ 
@ControllerAdvice(basePackages = "com.zkn.learnspringboot.web.controller") 
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{ 
 
  public JsonpAdvice() { 
 
    super("callback","jsonp"); 
  } 
}

下面我們寫個類來測試一下：

package com.zkn.learnspringboot.web.controller; 
 
import com.zkn.learnspringboot.domain.PersonDomain; 
import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.http.MediaType; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RestController; 
 
/** 
 * Created by wb-zhangkenan on 2016/12/1. 
 */ 
@RestController 
@RequestMapping("/jsonp") 
public class JsonpTestController { 
  @Autowired 
  private PersonDomain personDomain; 
 
  @RequestMapping(value = "/testJsonp",produces = MediaType.APPLICATION_JSON_VALUE) 
  public PersonDomain testJsonp(){ 
 
    return personDomain; 
  } 
}

當(dāng)我們發(fā)送請求為：http://localhost:8003/jsonp/testJsonp的時候，結(jié)果如下：

當(dāng)我們發(fā)送的請求為：http://localhost:8003/jsonp/testJsonp?callback=callback的時候，結(jié)果如下所示：

看到區(qū)別了嗎？當(dāng)我們在請求參數(shù)中添加callback參數(shù)的時候，返回的數(shù)據(jù)就是jsonp的，當(dāng)我們請求參數(shù)中不帶callback的時候，返回的數(shù)據(jù)是json的。可以讓我們方便的靈活運(yùn)用。下面再奉上一個jsonp的完整案例。

前臺頁面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<html> 
<head> 
  <title>Title</title> 
  <script src="resources/js/jquery-2.1.4.min.js" type="text/javascript"></script> 
</head> 
<body> 
<input type="button" value="測試jsonp請求" onclick="testJsonp()" /> 
<script type="text/javascript"> 
  function testJsonp() { 
    $.ajax({ 
      type:'get', 
      url:'http://localhost:8003/jsonp/testJsonp', 
      dataType:'jsonp', 
      jsonp:"callback", 
      success:function (data) { 
        alert(data.userName+" "+data.passWord); 
      }, 
      error:function (err) { 
        alert('出現(xiàn)錯誤了!!!'); 
      } 
    }); 
  } 
</script> 
</body> 
</html>

后臺代碼1：

package com.zkn.learnspringmvc.news.controller; 
 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
 
/** 
 * Created by zkn on 2016/12/3. 
 */ 
@Controller 
public class JsonpTestController { 
 
  @RequestMapping("testJsonp") 
  public String testJsonp(){ 
 
    return "jsonp"; 
  } 
}

下面我們發(fā)送請求如下：http://localhost:8080/LearnSpringMvc/testJsonp