JSONP跨域访问实现_jsonp如何实现跨域(1)-CSDN博客

本文链接：https://blog.csdn.net/2301_82257383/article/details/138977249

学习路线：

这个方向初期比较容易入门一些，掌握一些基本技术，拿起各种现成的工具就可以开黑了。不过，要想从脚本小子变成黑客大神，这个方向越往后，需要学习和掌握的东西就会越来越多以下是网络渗透需要学习的内容：
在这里插入图片描述

需要体系化学习资料的朋友，可以加我V获取：vip204888 （备注网络安全）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

3.客户端定义回调函数myCakkback,在接收带返回的javascript代码时，自动执行该函数，并以JSON数据作为参数

 function myCallback(data) {
    // 处理返回的 JSON 数据
    console.log(data.name);
    console.log(data.age);
  }

通过这种方式，JSONP可以绕过浏览器的同源策略限制，实现跨域请求和数据获取。

二生成JSON响应

1.PHP代码

在192.168.120.84上生成PHP代码，并命名为list-json.php

<?php

// //连接数据库并访问
$conn = new mysqli('127.0.0.1','root','123456','learn') or die("数据库连接不成功.");
$conn->set_charset('utf8');
$sql = "select * from xssdata";
$result = $conn->query($sql);

//输出JSON数据到页面
$json = json_encode($result->fetch_all(MYSQLI_ASSOC));
echo $json;

$conn->close();

?>

2.浏览器访问

在浏览器中直接访问，将获取以下数据

三在另外一个页面使用AJAX访问

1.在192.168.120.84构建一个新的页面，命名为list-json.html，向list-json.php发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var listUrl = 'http://192.168.120.84/jsonp/list-json.php';
        //实例化XMLHttpRequest，用于发送AJAX请求
        xmlhttp = new XMLHttpRequest();
        var count = 0;
        //当请求状态发生变化时，触发执行代码
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status==200){
                //取得请求的响应，并通过响应正则提取Token
                var text = xmlhttp.responseText
                alert(text)
            }
        };
        xmlhttp.open("GET",listUrl,false);
        xmlhttp.send();
    </script>
</head>
<body>

2.在浏览器访问list-json.php，正常弹窗显示

3.将list-json.php保存至192.168.120.51服务器

（1）访问方式

将list-json.php的代码保存到192.168.120.51服务器，在浏览器中直接访问该地址，确认可以正常访问（注意改数据库连接）

（2）在84服务器发list-json.html页面访问

将list-json.html在的listUrl地址修改为51服务器的地址，此时在浏览器中访问，将无法弹窗，打开F12，看到控制台的输出如下

以上，就是跨域存在的问题。

四使用JSONP解决跨域访问

1.修改51服务器的list-json.php

将
echo $json;
替换为
echo $_GET['callback']."(".$json.")"; //向前端输出回调函数

2.将84服务器上的list-json.html页面修改为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">


### 给大家的福利


**零基础入门**


对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。


![](https://img-blog.csdnimg.cn/img_convert/95608e9062782d28f4f04f821405d99a.png)


同时每个成长路线对应的板块都有配套的视频提供：


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a91b9e8100834e9291cfcf1695d8cd42.png#pic_center)

因篇幅有限，仅展示部分资料

**需要体系化学习资料的朋友，可以加我V获取：vip204888 （备注网络安全）**

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**