解决浏览器跨域限制方案之JSONP

一.什么是JSONP

JSONP即:JSON with Padding,是一种解决因浏览器跨域限制不允许访问跨域资源的方法。
JSONP是一个非官方的协议,它允许在服务器端返回javascript标签到浏览器,在浏览器端通过调用javascript函数的形式实现访问跨域资源或数据。

二.JSONP和JSON的关系

JSONP是一种解决因浏览器跨域限制不允许访问跨域资源的方法;而JSON是一种数据格式,与xml类似。
虽然二者在字面上都含有关键字“JSON”,但实际上他们之间没有任何关系。
通过JSONP获取到的跨域数据是javascript对象,而非JSON对象,所以避免了数据解析这个过程。

三.JSONP的原理

本质上来讲,JSONP解决访问跨域资源的方法,与直接使用<script>标签引用资源是一样的。
原因在于:使用JSONP访问跨域数据时,就是需要在DOM中动态创建<script>标签,并设置src属性访问指定资源。
差别在于:通过JSONP获取到的返回数据是一个函数调用,数据以参数的形式传递给函数;而<script>标签返回的是引用的资源内容。

四.实战示例

1.前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h2>验证使用JSONP方式发送跨域请求</h2>
<div>
<input type="button" value="发送请求" onclick="ajaxJsonp()">
</div>
</body>
<script type="text/javascript">
// 前端通过动态创建javascript标签的方式发送请求
function ajaxJsonp() {
var url = "http://localhost:8081/jsonp?callback=jsonpcall";
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = url;
document.body.appendChild(script);
}

// jsonp返回数据时调用的函数,数据以参数形式传递
function jsonpcall(data) {
console.log("do response jsonp data");
console.log(data);
}
</script>
</html>

2.服务端代码

1
2
3
4
5
6
7
8
9
10
11
12
/** * 使用JSONP方式处理跨域GET请求 * @param req * @param resp * @param callback 回调函数名称 * @return */
@RequestMapping(value = "/jsonp", method = RequestMethod.GET)
@ResponseBody
public Object testAjaxJsonp(HttpServletRequest req, HttpServletResponse resp,
@RequestParam("callback") String callback) {
JSONObject json = new JSONObject();
json.put("name", "jsonp");
json.put("pwd", "");

// 将数据作为函数的参数返回给浏览器,如: jsonpcall({"name":"jsonp","pwd":""})
return new StringBuffer().append(callback).append("(").append(json).append(")");
}

jquery中使用getJson

1
2
3
4
5
$("#b1").click(function () {
$.getJSON("http://127.0.0.1:8989/jsonp/?callback=?", function (res) {
console.log(res);
})
});

要注意的是在url的后面必须要有一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个?是jQuery内部自动生成的一个回调函数名。

想要自己指定回调名,可以使用$.ajax实现

1
2
3
4
5
6
7
8
9
10
11
$("#b1").click(function () {
$.ajax({
url: "http://127.0.0.1:8989/jsonp/",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "rion2"
})
});
function rion2(res) {
console.log(res);
}

【参考】
http://www.nowamagic.net/librarys/veda/detail/224 JSONP跨域的原理解析
http://www.xiaoxiaozi.com/2011/11/25/2239/ JSONP与POST方式请求
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 说说JSON和JSONP
http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html 深入浅出JSONP–解决ajax跨域问题

解决浏览器跨域限制方案之JSONP - 腾讯云开发者社区-腾讯云


解决浏览器跨域限制方案之JSONP
https://www.chengyao.xyz/2022/08/10/解决浏览器跨域限制方案之JSONP/
作者
ChengYao
发布于
2022年8月10日
许可协议