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

最新推荐文章于 2021-08-10 09:24:02 发布
最新推荐文章于 2021-08-10 09:24:02 发布
阅读量1k 收藏
点赞数

背景：
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端：
[html] view plaincopyprint?
 @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端：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!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>  

海拉姆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Springboot解决ajax+自定义headers的跨域请求问题
10-16
由于浏览器同源策略（同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器...接下来通过本文给大家介绍Springboot如何优雅的解决ajax+自定义headers的跨域请求 ,需要的朋友可以参考下
来说说SpringMVC + JSONP的跨域请求
weixin_34310127的博客
08-18 251
先来说说场景，JSON，这货大家应该都懂，不懂的请自动面壁思过，那么什么是JSONP，不是JSON放了个P就叫JSONP，而是JSON with Padding，在进行跨域请求的时候需要的数据，什么是跨域，打个比方：在user.weixin.com下的某个页面下，用户服务需要调用订单服务，请求order.weixin.com，那么在这两个二级域名下，请求是互斥的，如果请求就会报错。   先来看...
Ajax+Spring MVC实现跨域请求（JSONP）JSONP 跨域
weixin_30762087的博客
12-21 80
JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案。后端为Spring MVC架构的,前端则通过Ajax进行跨域访问。 1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback))，然后以JavaScript语 法的方式,生成一个function 2、接下来,将JSON数据直接以入参的方式,放...
springmvc实现jsonp跨域接口访问
ryx001的博客
05-18 2528
最近公司做项目,有一个功能,需要完成官网首页调用接口,完成数据的插入,用到了需要跨域的操作,经过本人的几天的研究,,终于实现了,说说网上的方法吧,将的很多,没有一个实用的,好多解释也不是很明确,所以本人在刚做完项目的情况下,根据自己的理解,以及自己的代码,帮助各位解决疑难,如有解释的不对的地方,尽请谅解!     什么是jsonp,我就不再赘述了.老生常谈了,主要说说跨域的几个方法,  第一个
Ajax+Spring MVC实现跨域请求（JSONP）(转)
dichengyan0013的博客
12-14 58
背景： AJAX向后台（springmvc）发送请求，报错：已阻止交叉源请求：同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源。可 以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。 百度一下，发现是遇到了跨域请求请求问题。搜集资料如下 JSONP解释 在解释JSONP之前,我们需要了解下”同源策略...
浅谈JQuery+ajax+jsonp 跨域访问
10-22
下面小编就为大家带来一篇浅谈JQuery+ajax+jsonp 跨域访问。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Spring Boot 2.0.2+Ajax解决跨域请求的问题
08-26
主要介绍了详解Spring Boot 2.0.2+Ajax解决跨域请求的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jquery+ajax实现跨域请求的方法
12-10
本文实例讲述了jquery+ajax实现跨域请求的方法。分享给大家供大家参考。具体实现方法如下： 说明：这里的dataType 为 “jsonp” ；type 只能为 GET 前台请求代码如下： 代码如下:$.ajax({  type: “GET”,  url...
ajax跨域请求结合springmvc后台代码学习整理
阿飞云漫步
06-14 4731
ajax跨域请求，在工作中遇到使用ajax发起请求获取数据，但是请求的数据不在同一个域下，这样子就要使用到ajax的跨域请求了！ 我使用的框架 SpringMVC，我在PC端的项目里面写一个接口方法，但是在wap项目中也要用改接口！下面贴出示例代码：
Springmvc实现对jsonp的支持
qq_35249342的博客
10-01 4761
跨域问题 提到jsonp首先就要提一下跨域。因为只有遇到跨域问题才会使用jsonp。 现在的项目一般都是分布式项目，既然是分布式项目肯定就会涉及到跨域请求资源的问题，那么什么是跨域。 我们对资源的访问都是通过url,即域名+各种 参数。 当域名，端口号，协议不同时，即为跨域。 这种情况下就要使用jsonp来进行跨域请求。 jsonp的原理是利用src能跨域请求资源的特性来实现的，细心的...
服务器响应回调函数,解决有关flask-socketio中服务端和客户端回调函数callback参数的问题（全网最全）...
weixin_33044131的博客
08-10 1340
由于工作当中需要用的flask_socketio，所以自己学习了一下如何使用，查阅了有关文档，当看到回调函数callback的时候，发现文档里都描述的不太清楚，最后终于琢磨出来了，分享给有需要的朋友首先看看官方文档及其译文看到这里以后，我就开始照着文档敲代码，发现即使我按照文档里的写法写了，也没有调用我们的回调函数ack废话不多说，直接上最终版代码index.htmlindex1$(documen...
JQuery的Ajax跨域请求的解决方案
Rod_Johson的专栏
12-04 265
今天在项目中需要做远程数据加载并渲染页面，直到开发阶段才意识到ajax跨域请求的问题，隐约记得Jquery有提过一个ajax跨域请求的解决方式，于是即刻翻出Jquery的API出来研究，发现JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。         什么是jso...
JQ跨域访问方法
hxkjnet360的专栏
10-29 1168
直到开发阶段才意识到ajax跨域请求的问题，隐约记得Jquery有提过一个ajax跨域请求的解决方式，于是即刻翻出Jquery的API出来研究，发现JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。         什么是jsonp格式呢？API原文：如果获取的数
springMVC实现jsonp的跨域请求
不积跬步，无以至千里；不积小流，无以成江海。
09-12 5870
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
SpringMVC Jsonp跨域
liu911025的博客
04-23 286
服务一 http://localhost:8080/index 端口配置 server.port=8080 spring.mvc.view.suffix=.html controller @Controller public class JsonpController { @GetMapping("index") public String index() { ...
json和jsonp的区别和联系 springMVC实现jsonp跨域请求
HaHa_Sir的博客
02-27 789
json和jsonp的区别和联系 springMVC实现jsonp跨域请求一、 概念理解1、 json：指的是 JavaScript 对象表示法（JavaScript Object Notation）；JSON 是轻量级的文本数据交换格式 ； JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。2、 jsonp：(JSON with Padding) 是 ...
jquery,ajax,jsonp例子+springmvc后台
BigDragon
11-05 243
&lt;script src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(function () { $("#username").bind('change', function () { /* $.ajax({ url: "http:...
spring mvc 设置跨域请求
最新发布
03-23
在Spring MVC中设置跨域请求可以通过以下步骤实现： 1. 添加CORS配置类：创建一个类，例如`CorsConfig`，并使用`@Configuration`注解标记。在该类中，可以使用`addMapping`方法来配置允许跨域请求的路径、允许的请求方法、允许的请求头等。 ```java @Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") // 配置允许跨域的路径 .allowedOrigins("http://example.com") // 允许的源地址 .allowedMethods("GET", "POST") // 允许的请求方法 .allowedHeaders("header1", "header2") // 允许的请求头 .allowCredentials(true); // 是否允许发送Cookie } }; } } ``` 2.用CORS配置：在Spring MVC的配置类中，使用`@EnableWebMvc`注解启用MVC配置，并将上一步创建的CORS配置类添加到配置中。 ```java @Configuration @EnableWebMvc public class MvcConfig extends WebMvcConfigurerAdapter { @Autowired private CorsConfig corsConfig; @Override public void addCorsMappings(CorsRegistry registry) { corsConfig.corsConfigurer().addCorsMappings(registry); } } ``` 通过以上步骤，你可以在Spring MVC中设置跨域请求。请注意，这只是一种常见的配置方式，你可以根据实际需求进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值