JSONP跨域访问

JSONP跨域访问

一、概述

1.什么是JSONP

JSONP（JSON with Padding）是JSON的一种”使用模式“，可用于解决主流浏览器的跨域数据访问的问题。

2.JSONP的实现原理

• 由于浏览器同源策略限制，网页无法通过Ajax请求非同源的接口数据。
• script标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本数据。
• 通过函数调用的形式，接收跨域接口响应回来的数据。

二、实例演示

1.创建jsonp.php

<?php

$conn = new mysqli('127.0.0.1', 'root', 'root', 'learn') or die('数据库连接成功');
$conn->set_charset('utf8');
$sql = "select artid, author, time from t_article";
$res = $conn->query($sql);
if ($res) {
    $result = $res->fetch_all(MYSQLI_ASSOC);
    $json = json_encode($result);    
    echo $json;
}else{
    echo "无返回数据";
}
$conn->close();

?>

2.创建jsop.html 发送ajax请求

<script>
	var url = 'http://192.168.30.1/temp/jsonp.php/'
	// 实例化XMLHttpRequest
	xmlhttp = new XMLHttpRequest();
	// 判断状态 0:未初始化 1:请求已建立 2:请求已发送 3:请求处理中 4:响应完成
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var text = xmlhttp.responseText;
			alert(text);    
		}
	};
	xmlhttp.open('GET', url, false);
	xmlhttp.send();    
</script>

3.同源访问测试

4.跨域访问测试

将jsonp.php放到服务器上，服务器ip地址为192.168.30.103

通过本地的jsonp.html发送请求到服务器的jsonp.php

无返回数据

F12查看报错信息，被CORS安全策略阻挡了

burp抓包看一下，已经响应了数据，但是被浏览器阻止了

那么如何解决跨域访问的问题呢？

5.实现跨域访问

修改js代码

<!-- JSONP回调实现跨域 -->
<script>
	function test(args) {
    // 调用stringfy方法，将JSON对象转换为字符串
	alert(JSON.stringify(args));
    }
</script>
<script src="http://192.168.30.103/jsonp.php?callback=test"></script>

需要在获取响应之前定义函数

修改服务器上的jsonp.php

<?php

$conn = new mysqli('localhost', 'root', '123456', 'learn') or die('数据库连接成功');
$conn->set_charset('utf8');
$sql = "select artid, author, time from t_article";
$res = $conn->query($sql);
if ($res) {
    $result = $res->fetch_all(MYSQLI_ASSOC);
    $json = json_encode($result);

    echo $_GET['callback'] . "(" . $json . ");
}else{
    echo "无返回数据";
}
$conn->close();

?>
                                                   

再通过本地的jsonp.html访问jsonp.php，成功获取到了参数

服务器端要输出回调函数的名称如test，格式为test(json)。前端页面中，通过src属性获取到了test([{}])JSON对象，预先定义好的test函数执行，输出数据。

JSONP是利用src属性，只能处理GET请求且必须经过回调，在真实场景中比较受限