JSONP跨域，及Spring MVC返回JSONP数据

最新推荐文章于 2021-02-24 03:41:44 发布
最新推荐文章于 2021-02-24 03:41:44 发布
阅读量1.3k 收藏 2
点赞数 1


背景：

AJAX向后台（springmvc）发送请求，报错：已阻止交叉源请求：同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源。可

以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。

百度一下，发现是遇到了跨域请求请求问题。搜集资料如下

JSONP解释

在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载额文档的属性。有点绕,说的简单点就是浏览器限制脚本只能和同协议、同域名、同端口的脚本进行交互。

JSONP就是为了解决这一问题的,JSONP是英文JSON with Padding的缩写,是一个非官方的协议。他允许服务端生成script tags返回值客户端,通过JavaScript callback的形式来实现站点访问。JSONP是一种script tag的注入,将server返回的response添加到页面是实现特定功能。

简而言之,JSONP本身不是复杂的东西,就是通过scirpt标签对javascript文档的动态解析绕过了浏览器的同源策略。

JSONP原理及实现

接下来,来实际模拟一个跨域请求的解决方案。后端为spring MVC架构的,前端则通过Ajax进行跨域访问。

1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback))，然后以JavaScript语

法的方式,生成一个function

2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。

3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的

回调函数里(动态执行回调函数)。

这种动态解析js文档和eval函数是类似的。


经过一番努力，解决如下： 

SpringMVC端：

[java]  view plain  copy
  1. @RequestMapping("/get")    
  2.     public void get(HttpServletRequest req,HttpServletResponse res) {    
  3.         res.setContentType("text/plain");    
  4.         String callbackFunName =req.getParameter("callbackparam");//得到js函数名称    
  5.         try {    
  6.             res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据    
  7.         } catch (IOException e) {    
  8.             e.printStackTrace();    
  9.         }    
  10.     }    
  11.         
  12.     @RequestMapping("/getJsonp")    
  13.     @ResponseBody    
  14.     public JSONPObject getJsonp(String callbackparam){    
  15.    Company company=new Company();    
  16.    company.setAddress("广州天河华景软件园");    
  17.    company.setEmail("123456@qq.com");    
  18.    company.setName("广州讯动网络可以有限公司");    
  19.    company .setPhone("12345678912");    
  20.      return new JSONPObject(callbackparam, company);     
  21.     }    

AJAX端：

[java]  view plain  copy
  1. <!DOCTYPE html>    
  2.    <html>    
  3.    <head>    
  4.    <meta charset="utf-8">    
  5.        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>    
  6.    <script>    
  7.    $(document).ready(function(){    
  8.            
  9.            
  10.    $("#but1").click(function(){    
  11.         $.ajax({    
  12.            url:'http://127.0.0.1:8080/DevInfoWeb/get',    
  13.            type: "get",    
  14.            async: false,    
  15.            dataType: "jsonp",    
  16.            jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数     
  17.            jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来     
  18.            success: function(json) {    
  19.             alert(json);    
  20.            },    
  21.            error: function(){alert('Error');}    
  22.    });    
  23.    });    
  24.        
  25.        
  26.    $("#but2").click(function(){    
  27.         $.ajax({    
  28.            url:'http://127.0.0.1:8080/DevInfoWeb/getJsonp',    
  29.            type: "get",    
  30.            async: false,    
  31.            dataType: "jsonp",    
  32.            jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数     
  33.            jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来     
  34.            success: function(json) {    
  35.             alert(json);    
  36.            },    
  37.            error: function(){alert('Error');}    
  38.    });    
  39.    });    
  40.        
  41.        
  42.    });    
  43.    </script>    
  44.    </head>    
  45.    <body>    
  46.        
  47.    <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>    
  48.    <button id="but1">按钮1</button> <br/>    
  49.    <button id="but2">按钮2</button>    
  50.        
  51.    </body>    
  52.    </html>    

参考文章：

http://www.2cto.com/kf/201411/351856.html

http://blog.csdn.net/d8111/article/details/45249871


集成优雅
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
springmvc简单框架提供的jsonp服务端接口
08-15
用springmvc框架为别人提供一个接口，返回一串json数据。jsonp服务端。需要调用接口代码也可以联系我。idea。
SpringMVC返回jsonp解决跨域问题
男儿当自强
08-29 2020
package s.s.m.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.converter.json.MappingJacksonValue; import org.springframework.stereotype.Cont
SpringMVC中JSONP的基本使用
weixin_30236595的博客
02-24 117
1 @RequestMapping("/check/{param}/{type}") 2 @ResponseBody 3 public Object checkData(@PathVariable String param, @PathVariable Integer type, String callback) { 4 5 TaotaoRe...
java jsonp返回_SpringMVC返回jsonp的问题
weixin_36285392的博客
02-24 259
项目采用springMVC作为控制层，有一个请求用来返回jsonp的数据。代码大致内容如下：@RequestMapping(value = LoginUrlUtil.LOGINJSON)@ResponseBodypublic Object loginjsonp (String my_username, String my_password, String callbackJsonp, HttpSe...
如何在springmvc 中返回jsonp格式
CHENJINGBIN的博客
04-25 1669
在这里需要使用springmvc4.1或之上的版本。 需要继承MappingJackson2HttpMessageConverter这个类，重写writeInternal方法。 基本步骤： 1写继承MappingJackson2HttpMessageConverter的类package com.ljlx.filter;import java.io.IOException;import jav
详解java 中Spring jsonp 跨域请求的实例
10-19
主要介绍了详解java 中Spring jsonp 跨域请求的实例的相关资料,jsonp 可用于解决主流浏览器的跨域数据访问的问题,需要的朋友可以参考下
使用jsonp实现跨域获取数据实例讲解
11-27
var jsonp = function(url, data, callback) { //1、挂载回调函数 var fnsuffix = Math.random().toString().replace('.', ''); var cbFuncName = 'my_json_cb' + fnsuffix; window[cbFuncName] = callback; /...
jsonp跨域获取数据的基础教程
10-18
主要给大家介绍了关于jsonp跨域获取数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jQuery使用JSONP实现跨域获取数据的三种方法详解
10-19
主要介绍了jQuery使用JSONP实现跨域获取数据的三种方法,结合实例形式对比分析了jsonp跨域获取数据的3种常用操作技巧,需要的朋友可以参考下
AngularJS实现的JSONP跨域访问数据传输功能详解
10-19
主要介绍了AngularJS实现的JSONP跨域访问数据传输功能,较为详细的分析了JSONP的概念、功能并结合实例形式给出了AngularJS使用JSONP进行跨域访问数据传输的相关技巧,需要的朋友可以参考下
springmvc如何返回json数据
端吉的博客
10-23 637
springmvc如何返回json数据
AJAX利用Jsonp进行跨域对MVC项目访问
Fanbin168的专栏
12-09 2474
JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 　　2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的
springMVC实现jsonp的跨域请求
不积跬步，无以至千里；不积小流，无以成江海。
09-12 5871
1.在Controller层实现jsonp接口 /** *Project Name: gspReceiveServer *File Name: EquipmentController.java *Package Name: com.ltmap.platform.equipment.controller *Date: 2016年8月3日 上午9:46:35 *Cop
Jsonp原理实例及MVC使用
aiyuan3984的博客
12-29 101
最近，由于工作用到了json和jsonp,由于前台是Android的，后台是MVC。一般MVC后台要返回JSON和XML这两种格式，所以选择了JSON。同时，也用到了JSONP, 简单来说，Jsonp的原理就是通过<script>标记引入一个定义好json数据的js，因为<script>标记是不受域名限制的，JSONP是基于JSON的一种形式，可以跨域传输...
springmvc实现jsonp
Justnow_的博客
12-29 1265
最近前端有个需要跨域访问的需求，需要后端实现对jsonp的支持。在经过多方的资料查找后，最终实现了对jsonp的支持。现贴出代码，以供后期复习参考 后端代码： @RequestMapping(value = "/user") @ResponseBody public JSONPObject showUser(HttpServletRequest request, HttpSe
扩展springMVC消息转换器来支持jsonp数据格式
Chenny的blog
03-31 4513
JSONP是用来解决json跨域问题的技术。即将传输的json文本封装在函数调用里callbackName(json文本); 当浏览器读取到funName(json文本)就会用js的语法解析，然后调用定义好的js callbackName函数，以回调函数的形式获取json数据。 扩展SpringMvc消息转换器之前的解决办法，在需要给前台传json格式数据的controler中，自己根
spring MVC 配置支持JSONP
热门推荐
h70614959的专栏
06-03 2万+
配置文件 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
spring jsonp实现
CAO的专栏
04-06 335
spring jsonp实现@ControllerAdvice(basePackages = {"com.meizu.test.jsonp"}) public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice() { super("callback"); } }
SpringMVC JSONP配置
九丶弟
07-18 555
前言 关于JSONP的配置有很多文章都讲过，也有很多实现方案。但本文依然存在的目的是规范JSONP。但为什么要规范? 本文基于的spring版本为5.1.7，在很多配置上会与5之前的版本有很大的区别。 为什么要规范JSONP 在springMVC 5的官方文档中，在CORS一章有说明不推荐使用JSONP。之所以推荐，就要先了解CORS，服务端最怕的就是恶意请求，其中有相当一部分是作为跨域请求过...
js jsonp跨域
最新发布
03-29
JSONP（JSON with Padding）是一种跨域请求的解决方案，它允许在不同域之间进行数据交互。在同源策略限制下，浏览器不允许通过AJAX请求跨域资源，但可以通过动态创建`<script>`标签来实现跨域请求。 JSONP的原理是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值