背景:

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端:

  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端:

  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. $("#but1").click(function(){
  10. $.ajax({
  11. url:'http://127.0.0.1:8080/DevInfoWeb/get',
  12. type: "get",
  13. async: false,
  14. dataType: "jsonp",
  15. jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
  16. jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来
  17. success: function(json) {
  18. alert(json);
  19. },
  20. error: function(){alert('Error');}
  21. });
  22. });
  23.  
  24. $("#but2").click(function(){
  25. $.ajax({
  26. url:'http://127.0.0.1:8080/DevInfoWeb/getJsonp',
  27. type: "get",
  28. async: false,
  29. dataType: "jsonp",
  30. jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
  31. jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来
  32. success: function(json) {
  33. alert(json);
  34. },
  35. error: function(){alert('Error');}
  36. });
  37. });
  38.  
  39. });
  40. </script>
  41. </head>
  42. <body>
  43.  
  44. <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
  45. <button id="but1">按钮1</button> <br/>
  46. <button id="but2">按钮2</button>
  47.  
  48. </body>
  49. </html>

参考文章:

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

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

Ajax+Spring MVC实现跨域请求(JSONP)的更多相关文章

  1. Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域

    JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...

  2. Ajax+Spring MVC实现跨域请求(JSONP)(转)

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  3. spring mvc支持跨域请求

    @WebFilter(urlPatterns = "/*", filterName = "corsFilter") public class CorsFilte ...

  4. Springboot如何优雅的解决ajax+自定义headers的跨域请求

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  5. Springboot如何优雅的解决ajax+自定义headers的跨域请求[转]

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  6. 循序渐进Python3(十一) --6--  Ajax 实现跨域请求 jsonp 和 cors

    Ajax操作如何实现跨域请求?       Ajax (XMLHttpRequest)请求受到同源策略的限制.       Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外 ...

  7. spring MVC cors跨域实现源码解析

    # spring MVC cors跨域实现源码解析 > 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议.IP.http方法任意一个不同就 ...

  8. 浏览器同源策略,跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  9. spring MVC cors跨域实现源码解析 CorsConfiguration UrlBasedCorsConfigurationSource

    spring MVC cors跨域实现源码解析 spring MVC cors跨域实现源码解析 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议 ...

随机推荐

  1. eclipse + MinGW调试程序printf输出被buffer的问题

    比如说一个 1. int x = 1;2. printf("xxx")3. int y = 2;调试的时候,运行第二行,但是控制台没有输出.必须调试到整个程序都结束的时候才会把所有 ...

  2. Java Resource路径小结

    首先一点很重要,Java中不存在标准的相对路径,各种相对路径取资源的方式都是基于某种规则转化为绝对路劲 然后一点也很重要,绝对不要直接使用绝对路径,否则死得很难看 基于以上两点,总结Resource路 ...

  3. Silverlight-管理独立存储(Isolated Storage)

    Silverlight中的独立存储是其内部的可信任的可访问文件空间,在这里你可以使用Silverlight 随意的创建.读取.写入.删除目录和文件,它有一些类似于Cookie,但是它可以在客户端保存大 ...

  4. Yarn源码分析之事件异步分发器AsyncDispatcher

    AsyncDispatcher是Yarn中事件异步分发器,它是ResourceManager中的一个基于阻塞队列的分发或者调度事件的组件,其在一个特定的单线程中分派事件,交给AsyncDispatch ...

  5. 华为HiAI 助力苏宁易购,让你尽享完美视觉购物体验!

    还在感慨商品照片与实物存在差距,又要退货? 还在抱怨被忽视的图片小细节,影响了生活品质? 想要“买买买”, 又担心海量的商品图片耗光你的流量? 就在近期 搭载HiAI能力的苏宁易购新版上线, 让你畅快 ...

  6. json responseJson

    private void doResoponseJson(HttpServletResponse resp,String jsonString){ Trace.logError(Trace.COMPO ...

  7. laravel Lumen邮箱发送配置

    Lumen 中配置邮件 https://blog.csdn.net/glovenone/article/details/54344013 Lareval 比 Lumen 多了一个步骤 https:// ...

  8. spring cloud 订单调用用户

    下面实现一个订单调用用户实现例子,使用技术只要是spring,为以后操作负载打基础.(基于昨天别人问我的基础上做了实例供大家参考) 1.用户工程截图 : 2.用户工程启动类 3.用户工程控制类 4. ...

  9. 排序算法 c实现

    c语言实现插入排序.冒泡排序.选择排序.快速排序.堆排序.归并排序.希尔排序示例,需要的朋友可以参考下     实现以下排序 插入排序O(n^2) 冒泡排序 O(n^2) 选择排序 O(n^2) 快速 ...

  10. java中使用MD5进行加密

    java中使用MD5进行加密     在各种应用系统的开发中,经常需要存储用户信息,很多地方都要存储用户密码,而将用户密码直接存储在服务器上显然是不安全的,本文简要介绍工作中常用的 MD5加密算法,希 ...