Ajax+Spring MVC实现跨域请求（JSONP）(转)

时间：2022-09-12 08:08:41

背景：

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

@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);

     }

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>

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

  1. Ajax&plus;Spring MVC实现跨域请求（JSONP）JSONP 跨域

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

  2. Ajax&plus;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&plus;自定义headers的跨域请求

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

  5. Springboot如何优雅的解决ajax&plus;自定义headers的跨域请求&lbrack;转&rsqb;

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

  6. 循序渐进Python3（十一） --6-- &&num;160&semi;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. QTP操作word文档

    QTP可以对word文档进行操作,这里最主要展示的是向word文档写入内容,并保存的功能. Option explicit Dim wordApp Set wordApp = createobject ...

  2. 把电脑装成ubuntu系统了

    2014年一月11日 今天本来想在自己的电脑上装双系统,电脑本来有个win7,想再装一个ubuntu. 本来想用wubi装,可是wubi没法安装13.10,并且wubi安装后,读写速度也不快. 在网上 ...

  3. Part 12 DateTime functions in SQL Server

    DateTime functions in SQL Server IsDate, Day, Month, Year and DateName DateTime functions in SQL Ser ...

  4. JAVA&lowbar;SE基础——1&period;JDK&JRE下载及安装

    这是我学了JAVA来写的第一篇博客: 我首先是在传智播客领了张.毕向东老师的免费JAVA学习光盘来学习! 下面我来教大家安装使用JAVA时候必备的JDK 1.首先上甲骨文公司的官方网站下载JDK的安装 ...

  5. ViewPager切换动画PageTransformer的使用

    Android从3.0开始添加了属性动画后,诸多难以实现的动画都可以轻松解决了,v4包下的ViewPager控件当然也不例外,相对于非常平庸的默认切换动画,Google官方给我们展示了两个动画例子:D ...

  6. 【Go】go get 自动代理

    原文链接:https://blog.thinkeridea.com/201903/go/go_get_proxy.html 最近发现技术交流群里很多人在询问 go get 墙外包失败的问题,大家给了很 ...

  7. C&num;中Request&period;ServerVariables详细说明及代理

    Request.ServerVariables("Url") 返回服务器地址 Request.ServerVariables("Path_Info") 客户端提 ...

  8. JS处理数组内如果相同ID追加一个属性&lpar;如字体颜色&rpar;

    var arr=[{id:0},{id:0},{id:3},{id:2},{id:0},{id:4},{id:0},{id:1},{id:1},{id:2},{id:2}]; for(var i=0; ...

  9. 基于UML的需求分析和系统设计

    小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中有效地使用UML使之发挥应有的作用,怎样捕捉用户心中的需求并转 ...

  10. 转：使用 Go-Ethereum 1&period;7&period;2搭建以太坊私有链

    使用 Go-Ethereum 1.7.2搭建以太坊私有链 目录 [toc] 1.什么是Ethereum(以太坊) 以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约.开源的底 ...

相关文章