详解java 中Spring jsonp 跨域请求的实例

jsonp介绍

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解。
0、引入jar包

									<dependency> 

									      <groupId>org.springframework.boot</groupId> 

									      <artifactId>spring-boot-starter-jersey</artifactId> 

									    </dependency> 

									    <dependency> 

									      <groupId>org.springframework.boot</groupId> 

									      <artifactId>spring-boot-starter-web</artifactId> 

									    </dependency>

其他介绍就不多说了，开始上手吧。

1、继承AbstractJsonpResponseBodyAdvice类JsonpAdvice，并加上@RestControllerAdvice注解

									/*RestControllerAdvice的值指定拦截的包名*/ 

									@RestControllerAdvice("com.ctrl") 

									public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { 

									  public JsonpAdvice() { 

									    super("callback", "jsonp"); 

									        /*callback是url请求拦截的参数名，如果拦截成功会将返回数据传入函数执行回调函数*/

									  } 

									}

2、创建ctrl类

									package com.ctrl; 

									import java.util.HashMap; 

									import java.util.Map; 

									import javax.servlet.http.HttpServletRequest; 

									import org.springframework.web.bind.annotation.RequestMapping; 

									import org.springframework.web.bind.annotation.RestController; 

									@RestController

									public class HelloCtrl { 

									  @RequestMapping("/hello") 

									  public Map<String,Object> hello(HttpServletRequest request){ 

									    Map<String,Object>data = new HashMap<String,Object>(); 

									    data.put("suc", true); 

									    data.put("msg", "save suc"); 

									         data.put("param", request.getParameter("a") + "==" + request.getParameter("d")); 

									    return data ; 

									  } 

									}

4、创建启动app类：

									package com.services; 

									import org.springframework.boot.SpringApplication; 

									import org.springframework.boot.autoconfigure.SpringBootApplication; 

									@SpringBootApplication(scanBasePackages="com") 

									public class App { 

									  public static void main(String[] args) { 

									    SpringApplication.run(App.class, args); 

									  } 

									}

5、前端调用：

									<!DOCTYPE html> 

									<html> 

									<head> 

									<title>jquery跨域实例</title> 

									<!-- jquery版本可以不是3.2.1版本的 --> 

									<script type="text/javascript" src="jquery-3.2.1.js"></script> 

									<script type="text/javascript"> 

									  $(function() { 

									        /* 这是快捷调用，callback 是advice中设置的，?是保留参数， 

									        jquery会替换掉这个问号 url可是不同于请求地址的任何url*/ 

									    $.getJSON("/hello?callback=?", function(data) { 

									      //$("#showcontent").text("Result:" + data) 

									    });  

									    /*使用ajax方法调用*/

									    $.ajax({ 

									      type : "get", 

									      async : false, 

									      url : "/hello", 

									      dataType : "jsonp",//数据类型为jsonp  

									      data:{a:"b",d:"c"}, 

									      type:"POST", 

									      jsonp : "callback",//服务端用于接收callback调用的function名的参数  

									      success : function(data) { 

									        $("#showcontent").text("Result:" + data.suc + " requestParam:" + data.param ) 

									      },  

									      error : function() { 

									        alert('fail'); 

									      } 

									    }); 

									  }) 

									</script> 

									</head> 

									<body> 

									  <div id="showcontent"></div> 

									</body> 

									</html>