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

详解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>

服务器端也不一定要用spring 任何技术都可以,只要返回格式是下面的格式就可以,调用一个哈桑农户,出传入一个json或者是字符串就可以了。

/**/test01({"suc":true,"msg":"save suc"});

直接访问返回数据:

以上使用关于java 中Spring jsonp 跨域请求的实例详解,如有疑问请留言或者到本站社区交流讨论, 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-08-13

Spring 4.1+JSONP的使用指南

JSONP就是为了解决这一问题的,JSONP是英文JSON with Padding的缩写,是一个非官方的协议.他允许服务端生成script tags返回值客户端,通过javascript callback的形式来实现站点访问.JSONP是一种script tag的注入,将server返回的response添加到页面是实现特定功能. 简而言之,JSONP本身不是复杂的东西,就是通过scirpt标签对javascript文档的动态解析绕过了浏览器的同源策略. 如今的巨石应用已经越来越不行了,很多互

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

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

SpringBoot解决跨域请求拦截问题代码实例

前言 同源策略:判断是否是同源的,主要看这三点,协议,ip,端口. 同源策略就是浏览器出于网站安全性的考虑,限制不同源之间的资源相互访问的一种政策. 比如在域名https://www.baidu.com下,脚本不能够访问https://www.sina.com源下的资源,否则将会被浏览器拦截. 注意两点: 1.必须是脚本请求,比如AJAX请求. 但是如下情况不会产生跨域拦截 <img src="xxx"/> <a href='xxx"> </a&

Springboot 实现跨域访问无需使用jsonp的实现代码

Springboot 实现跨域访问 无需使用jsonp 在springboot的拦截器中添加respone的头信息即可 @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //String origin = (String) request.getRemoteHost()+":"+re

详解SpringMVC解决跨域的两种方案

1. 什么是跨域 跨域,即跨站HTTP请求(Cross-site HTTP request),指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求. 2. 跨域的应用情景 当使用前后端分离,后端主导的开发方式进行前后端协作开发时,常常有如下情景: 1.后端开发完毕在服务器上进行部署并给前端API文档. 2.前端在本地进行开发并向远程服务器上部署的后端发送请求. 在这种开发过程中,如果前端想要一边开发一边测试接口,就需要使用跨域的方式. 3. 通过注解的方式允许跨域 非常简单,我们可以在C

Springboot处理CORS跨域请求的三种方法

前言 Springboot跨域问题,是当前主流web开发人员都绕不开的难题.但我们首先要明确以下几点 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了. 之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议.域名.端口号都完全一致. 浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的H

完美解决axios跨域请求出错的问题

错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403

JS跨域请求的问题解析

同源策略 在运行中我们有时会出错是因为我们违反了同源策略,这是一种浏览器所实施的安全措施,用于限制具有不同来源的文档之间的交互.页面的来源由其协议,主机和端口号定义.具有相同来源的资源可以相互完全访问.但是如果具有不相同的源将会拒绝访问. http://www.a.com/a.js http://www.b.com/a.js 这两个之间就不可以互相访问,因为域名的不相同 域名组成 如果上面两个域名想互相访问就需要跨域请求,一般情况下同源政策规定:允许跨源 写入,而不允许跨源 读取这意味着同源政策

JSONP跨域请求实例详解

JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON

JS JSOP跨域请求实例详解

在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu