当前位置: 首页 > 编程笔记 >

详解SpringBoot多跨域请求的支持(JSONP)

索锐藻
2023-03-14
本文向大家介绍详解SpringBoot多跨域请求的支持(JSONP),包括了详解SpringBoot多跨域请求的支持(JSONP)的使用技巧和注意事项,需要的朋友参考一下

在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据(SpringBoot接收解析web请求是依赖于SpringMVC实现的)。下面我们就看一下怎么用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; 
  } 
} 

当我们发送请求为:http://localhost:8003/jsonp/testJsonp的时候,结果如下:

当我们发送的请求为:http://localhost:8003/jsonp/testJsonp?callback=callback的时候,结果如下所示:

看到区别了吗?当我们在请求参数中添加callback参数的时候,返回的数据就是jsonp的,当我们请求参数中不带callback的时候,返回的数据是json的。可以让我们方便的灵活运用。下面再奉上一个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('出现错误了!!!'); 
      } 
    }); 
  } 
</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"; 
  } 
} 

下面我们发送请求如下:http://localhost:8080/LearnSpringMvc/testJsonp

当我们点击测试jsopn请求这个按钮的时候,效果如下:

我们成功的实现了一个跨越的请求。更详细的请求信息如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍详细解密jsonp跨域请求,包括了详细解密jsonp跨域请求的使用技巧和注意事项,需要的朋友参考一下 1.什么是跨域请求: 服务器A上的一个页面,要请求服务器B上的一个处理程序,这就叫做跨域请求 本次的测试页面为: 处理程序kimhandler.ashx,如下: 另一张处理程序handler.ashx如下: 2.Ajax无法实现跨域请求 查看监视器,发现没有返回任何请求报文体 3.使

  • 问题内容: 我正在使用以下代码提出AJAX请求: 但是从Google Chrome JavaScript控制台,我一直收到此错误: XMLHttpRequest无法加载文件:/// C:/xampp/htdocs/webname/resources/templates/signup.php。跨源请求仅受HTTP支持。 问题是 signup.php 文件托管在我的本地Web服务器上,这是所有网站的运

  • 本文向大家介绍详解Vuejs2.0之异步跨域请求,包括了详解Vuejs2.0之异步跨域请求的使用技巧和注意事项,需要的朋友参考一下 Vuejs由1.0更新到了2.0版本。HTTP请求官方也从推荐使用Vue-Resoure变为了axios。接下来我们来简单地用axios进行一下异步请求。(阅读本文作者默认读者具有使用npm命令的能力,以及具备ES6的能力,以及等等。。。) 首先我们来安装Vue-Cl

  • 多请求支持 控制台编辑器允许您编写相互层叠的多个请求,像在控制台章节展示中那样,您可以通过定位光标并使用动作菜单向 Elasticsearch 提交请求。类似的,您可以一次选择多个请求: 图 5. 选择多个请求 控制台会依次提交请求到 Elasticsearch ,并将 Elasticsearch 返回的结果显示在右边窗口。这在调试问题或在多个场景中尝试查询组合时会非常方便。 选择多个请求还允许您

  • 本文向大家介绍详解AngularJS如何实现跨域请求,包括了详解AngularJS如何实现跨域请求的使用技巧和注意事项,需要的朋友参考一下 跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制。 下面阐述一下AngularJS中使用$http实现跨域请求数据。 AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 一、$ht

  • 在浏览器的沙箱环境下,默认只允许js代码请求其所属域的数据,不同域名/ip/协议,都默认禁止. 跨域所需要的是,是响应浏览器发起的OPTIONS,及真正的GET/POST, 共2个请求哦. 所需要的逻辑CrossOriginFilter已经封装好了 如何解决 nutz给出的方案非常简单,仅需要在入口方法上添加CrossOriginFilter即可 @Filters(@By(type=CrossO