cookie,session专题2-1:springmvc中jsonp跨域的几种解决方案

最新推荐文章于 2021-09-20 15:58:39 发布

菠萝科技

最新推荐文章于 2021-09-20 15:58:39 发布

阅读量2.2k

点赞数

分类专栏： java·未分类 spring/springboot全家桶文章标签： springmvc jsonp ajax 跨域

本文链接：https://blog.csdn.net/wabiaozia/article/details/52070815

版权

java·未分类同时被 3 个专栏收录

450 篇文章 3 订阅

订阅专栏

spring/springboot全家桶

111 篇文章 0 订阅

订阅专栏

js 前端技术

44 篇文章 0 订阅

订阅专栏

方案一:简单的解决方案

方案一原文出自:http://www.cnblogs.com/iqian/p/5062760.html

解决方案技术构架:Ajax+Spring MVC实现跨域请求（JSONP）JSONP 跨域

JSONP原理及实现

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

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

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

3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的回调函数里(动态执行回调函数)。这种动态解析js文档和eval函数是类似的。

AJAX端：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script> 
$(document).ready(function(){ 
       
       
$("#but1").click(function(){ 
     $.ajax({ 
        url:'http://127.0.0.1:8080/DevInfoWeb/get', 
        type: "get", 
        async: false, 
        dataType: "jsonp", 
        jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
        jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来  
        success: function(json) { 
         alert(json); 
        }, 
        error: function(){alert('Error');} 
}); 
}); 
   
   
$("#but2").click(function(){ 
     $.ajax({ 
        url:'http://127.0.0.1:8080/DevInfoWeb/getJsonp', 
        type: "get", 
        async: false, 
        dataType: "jsonp", 
        jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
        jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来  
        success: function(json) { 
         alert(json); 
        }, 
        error: function(){alert('Error');} 
}); 
}); 
   
   
}); 
</script> 
</head> 
<body> 
   
<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div> 
<button id="but1">按钮1</button> <br/> 
<button id="but2">按钮2</button> 
   
</body> 
</html>

SpringMVC端：

@RequestMapping("/get") 
 public void get(HttpServletRequest req,HttpServletResponse res) { 
     res.setContentType("text/plain"); 
     String callbackFunName =req.getParameter("callbackparam");//得到js函数名称 
     try { 
         res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据 
     } catch (IOException e) { 
         e.printStackTrace(); 
     } 
 } 
    
 @RequestMapping("/getJsonp") 
 @ResponseBody 
 public JSONPObject getJsonp(String callbackparam){ 
Company company=new Company(); 
company.setAddress("广州天河华景软件园"); 
company.setEmail("123456@qq.com"); 
company.setName("广州讯动网络可以有限公司"); 
company .setPhone("12345678912"); 
  return new JSONPObject(callbackparam, company);  
 }

方案二:企业常用的解决方案

使用的jQuery已经提供了解决跨域访问的方案。前端:你只需要在原来的访问地址上加上?callback=?即可。后端:假如前端callback=aaa,springmvc返回时只要用aaa包裹数据即可:aaa("后台返回数据")。

怎样让返回的数据被回调函数名aaa包裹有两种办法可工参考。第一种：自己在返回数据时手动拼接,例如方案一就是手动拼接。第一种手动拼接每次拼接都是固定的拼接步骤，我们要做很多重复而又没有意义的劳动，也使得写出的代码不够简洁。假如写好的代码出现了跨域问题，我们还要重新修改代码逻辑，让程序员修改写好的而又没有错误代码，这无疑是一种折磨。第二种:通过自定义转换器的方式。自己定义一个转换器继承默认的转换器，例如在使用@ResponseBody注解的场景跨域时,可以重写MappingJackson2HttpMessageConverter类，在重写的方法里加上一段逻辑:在请求中判断是否有callback参数名，如果没有直接返回。如果有callback参数名,先拼接好callback回调函数名，再返回。然后再在注解驱动中加上自定义的转换器即可。

关于注解驱动的一些知识可以看个入门介绍：可以看spring的3.2.17版本官方文档17.15.1也可以看

http://blog.csdn.net/yfisaboy/article/details/31755631

我自己的项目本身使用的Spring MVC 3.2，实际上在3.1之后，

<mvc:annotation-driven />注册的类发生了变化

如果想了解多点可以去看看张开涛的博客:http://www.iteye.com/blogs/subjects/kaitao-springmvc

配置SpringMVC返回JSON遇到的坑:http://www.open-open.com/lib/view/open1423128254779.html

我博客所有文章目录：http://blog.csdn.net/wabiaozia?viewmode=contents

-------------------------------------------------------------------------------------------------------------------

当然最准确的定义还是官方文档,学习更多springmvc知识可以参考spring Framework的web部分.

另附spring官方文档https://spring.io/docs/reference

菠萝科技

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
11
评论
cookie,session专题2-1:springmvc中jsonp跨域的几种解决方案

方案一:简单的解决方案原文:http://www.cnblogs.com/iqian/p/5062760.html解决方案技术构架:Ajax+Spring MVC实现跨域请求（JSONP）JSONP 跨域JSONP原理及实现接下来,来实际模拟一个跨域请求的解决方案。后端为Spring MVC架构的,前端则通过Ajax进行跨域访问。1、首先客户端需要注册一个callback
复制链接

扫一扫