JSONP跨域请求原理与SpringMVC实现
本文解析JSONP(JSON with Padding)解决浏览器跨域数据访问问题的原理。通过对比普通Ajax请求与Script标签加载的差异,展示JSONP如何绕过同源策略。结合SpringMVC框架,提供服务端配置与客户端调用的完整代码示例,帮助开发者理解并实现JSONP交互。
跨域概念与JSONP定义
跨域的概念解析:
1、域名存在差异
2、域名一致但端口号不同
出于安全机制的考量,JavaScript默认禁止跨域请求。为了解决这一限制,可以采用JSONP技术。
一、JSONP的基本定义
JSONP(JSON with Padding)是JSON的一种特定使用模式,旨在解决主流浏览器中的跨域数据访问障碍。受限于同源策略,通常位于 server1.example.com 的网页脚本无法与非 server1.example.com 的服务器进行通信。然而,HTML中的 <script> 元素是一个例外。利用 <script> 标签的这一开放特性,网页能够获取来自其他来源的动态生成的 JSON 数据,这种模式即被称为 JSONP。通过 JSONP 获取的数据并非纯粹的 JSON 格式,而是任意格式的 JavaScript 代码,由 JavaScript 解释器直接执行,而非使用 JSON 解析器进行解析。
核心原理:浏览器在发起 JavaScript 请求时,允许通过 <script> 标签的 src 属性进行跨域请求。可以在请求结果中嵌入回调方法名,并在请求页面中预先定义该方法,从而获取跨域请求的数据。(此时 JavaScript 请求的不是单纯的 JSON 数据,而是一段包含 JSON 数据的 JavaScript 脚本)。

JSONP原理与模拟演示
二、JSONP 模拟演示
服务器域名:http://localhost:8081/rest/itemcat/list
客户端服务器地址:http://localhost:8082/test.html
1、常规 JavaScript 跨域请求
服务器返回数据:

客户端发起请求的代码:
$(function(){
$.ajax( {url: "http://localhost:8081/rest/itemcat/list?callback=myFunction",
success: function(data){
console.info(data)
}});
});
执行结果
XMLHttpRequest cannot load http://localhost:8081/rest/itemcat/list?callback=myFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.
2、模拟 JSONP 请求方式
客户端发起请求的代码:
$(function(){
greateScript("http://localhost:8081/rest/itemcat/list");
function greateScript(src) {
$("<script><//script>").attr("src", src).appendTo("body")
}
});
执行结果:
list?_=1488425374097:1 Uncaught SyntaxError: Unexpected token :
SpringMVC环境下的JSONP实现
三、实际使用 JSONP
运行环境:
服务器域名:http://localhost:8081/rest/itemcat/list
客户端服务器地址:http://localhost:8082/test.html
服务端代码实现(基于 springmvc4):
@RequestMapping("/itemcat/list")
@ResponseBody
public Object getItemCatList(String callback) {
CatResult catResult = itemCatService.getItemCatList();
MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
//设置JSONP回调函数
mappingJacksonValue.setJsonpFunction(callback);
return mappingJacksonValue;
}
客户端调用代码:
$(function(){
$.ajax(
{ url: "http://localhost:8081/rest/itemcat/list",
dataType: "jsonp",
jsonp: "callback",
success: function(data){
console.info(data)
}});
});
执行结果:

观察返回结果可以发现,返回的数据并非单纯的 JSON 数据,而是一段 JavaScript 函数调用。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持本站!
JS 怎么使用 pako.js 解压 gzip 数据流
2026-11-05 15:54:33
零基础先学JavaScript还是Python?对比学习难度与上手曲线
2026-11-05 14:47:40
JS代码反混淆:主流在线工具与本地软件推荐
2026-11-04 19:28:41
浏览器控制台查看格式化JSON有哪些实用技巧
2026-11-04 16:56:53
JS控制台打印基础:console.log语法与多参数用法
2026-11-04 09:23:11
