JSONP实现跨域访问

news2024/11/13 8:54:59

JSONP实现跨域访问

课程目标

1、理解JSONP跨域访问的解决方案和实现原理

2、能够利用JavaScript后台和JQuery实现跨域处理

3、理解JavaScript后台代码回调的工作机制，并实现代码回调

4、综合上述，利用JSONP实现跨域访问

一、生成JSON响应

1、生成json数据的PHP代码

在192.168.2230.147服务器上生成PHP代码，并命名为list-json.php

 <?php
 ​
 // 链接数据库并访问数据
 $conn = new mysqli('127.0.0.1','root','','woniunote',3306) or die("数据库连接失败");
 $conn->set_charset("utf8");
 ​
 $sql = "select articleid,headline from article where articleid<5";
 $result = $conn->query($sql);
 ​
 // 输出JSON数据到页面
 $json_result = json_encode($result->fetch_all(MYSQLI_ASSOC));
 echo $json_result;
 //echo "<br>";
 //echo gettype($json_result);
 ​
 $conn->close();
 ​
 ?>

在192.168.230.135服务器上生成PHP代码，也命名为list-json.php

 <?php
 ​
 // 链接数据库并访问数据
 $conn = new mysqli('127.0.0.1','root','','mysql',3306) or die("数据库连接失败");
 $conn->set_charset("utf8");
 ​
 $sql = "select Host,User from user";
 $result = $conn->query($sql);
 ​
 // 输出JSON数据到页面
 $json_result = json_encode($result->fetch_all(MYSQLI_ASSOC));
 echo $json_result;
 //echo "<br>";
 //echo gettype($json_result);
 ​
 $conn->close();
 ​
 ?>

2、浏览器访问

浏览器访问http://192.168.230.147/security/list-json.php，结果如下

image-20240812194429896

浏览器访问http://192.168.230.135/list-json.php，结果如下

image-20240812194500018

二、利用页面ajax访问

1、获取JSON数据的html页面

在192.168.230.147构建一个html页面，命名为list-json.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script type="text/javascript">
         var listurl = "http://192.168.230.147/security/list-json.php";
         // var listurl = "http://192.168.230.135/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>
     <title>跨域访问请求查看JSON数据</title>
 </head>
 <body>
     welcome to security world
 </body>
 </html>

在192.168.230.135服务器上后见一个html页面，命名为list-json.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script type="text/javascript">
         // var listurl = "http://192.168.230.147/security/list-json.php";
         var listurl = "http://192.168.230.135/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>
     <title>跨域访问请求查看JSON数据</title>
 </head>
 <body>
     welcome to security world
 </body>
 </html>

2、浏览器同源访问

访问http://192.168.230.147/security/list-json.html，该html页面代码中访问http://192.168.230.147/security/list-json.php，正常弹窗，结果如下：

image-20240812195902741

访问http://192.168.230.135/list-json.html，该html页面代码中访问http://192.168.230.135/list-json.php，正常弹窗，结果如下：

image-20240812200347465

3、浏览器跨域访问

访问http://192.168.230.147/security/list-json.html，该html页面代码访问http://192.168.230.135/list-json.php，弹窗不显示，结果如下：

image-20240812210536468

image-20240812210721221

我们可以发现，明明请求的响应中带有我们所需要的信息，但为社么浏览器没有给我们显示出来呢？是因为响应中没有 Access-Control-Allow-Origin 字段

访问http://192.168.230.135/list-json.html，该html页面代码访问http://192.168.230.147/security/list-json.php，弹窗不显示，结果如下：

image-20240812210555803

image-20240812213047845

我们可以看到，以上就是跨域访问的问题，即使服务器响应回了正常的数据，但由于请求头中带有Origin字段表示跨域访问，而响应中又没有Access-Control-Allow-Origin字段来同意跨域访问，所以浏览器解析响应时便认定服务器不同意跨域访问，所以就不显示响应数据

三、使用JSONP解决跨域访问的问题

1、修改list-json.php

两台服务器上的list-json.php修改方式都一样

 #只需将
 echo $json_result;
 #替换为
 echo $_GET['callback']."(".$json_result.")";  //向前端页面输出回调函数，然后再html页面中使用js代码执行。

访问http://192.168.230.147/security/list-json.php?callback=test之后输出结果如下：

 test([{"articleid":"1","headline":"\u6f2b\u8c08\uff1a\u5f3a\u54e5\u5728\u5f3a\u54e5\u5b66\u5802\u60f3\u5bf9\u670b\u53cb\u4eec\u8bf4\u7684\u4e00\u4e9b\u8bdd"},{"articleid":"2","headline":"\u6f2b\u8c08\uff1a\u5df2\u7ecf\u6709\u8717\u725b\u5b66\u9662\u4e86\uff0c\u4e3a\u4ec0\u4e48\u8fd8\u8981\u521b\u529e\u5f3a\u54e5\u5b66\u5802\uff1f"},{"articleid":"3","headline":"\u6f2b\u8c08\uff1a\u8f6f\u4ef6\u5f00\u53d1\u548c\u8f6f\u4ef6\u6d4b\u8bd5\uff0c\u6211\u8be5\u5982\u4f55\u9009\u62e9\uff1f"},{"articleid":"4","headline":"\u6f2b\u8c08\uff1aJava\u548cPython\u73b0\u5728\u90fd\u633a\u706b\uff0c\u6211\u5e94\u8be5\u600e\u4e48\u9009\uff1f"}])
 string

访问http://192.168.230.135/list-json.php?callback=test之后输出结果如下：

 test([{"Host":"%","User":"root"},{"Host":"127.0.0.1","User":"root"},{"Host":"::1","User":"root"},{"Host":"localhost","User":""},{"Host":"localhost","User":"pma"},{"Host":"localhost","User":"root"}])
 string

2、修改list-json.html

192.168.230.147要跨域访问192.168.230.135上的list-json.php，所以 <script src="http://192.168.230.135/list-json.php?callback=test"></script>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script type="text/javascript">
         // 先定义好一个js函数
         function test(args) {
             //alert(args); args是一个json对象，直接显示我们看到的结果只是 object 这样的内容
             alert(JSON.stringify(args));
         }
 ​
     </script>
     <!--形成回调之后，在直接去调用test($json_result)，所以要保证test函数先定义callback函数参数值必须是回调函数名-->
     <script src="http://192.168.230.135/list-json.php?callback=test"></script>
     <title>跨域访问请求查看JSON数据</title>
 </head>
 <body>
     welcome to security world
 </body>
 </html>

一旦远程代码包含了之后，就会变成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
        // 先定义好一个js函数
        function test(args) {
            //alert(args); args是一个json对象，直接显示我们看到的结果只是 object 这样的内容
            alert(JSON.stringify(args));
        }

    </script>
    <!--形成回调之后，在直接去调用test($json_result)，所以要保证test函数先定义callback函数参数值必须是回调函数名-->
    <script>
        test([{"Host":"%","User":"root"},{"Host":"127.0.0.1","User":"root"},{"Host":"::1","User":"root"},{"Host":"localhost","User":""},{"Host":"localhost","User":"pma"},{"Host":"localhost","User":"root"}])
    </script>
    <title>跨域访问请求查看JSON数据</title>
</head>
<body>
    welcome to security world
</body>
</html>

所以下面的 <script> 标签中的test()就会执行上面 <script> 标签中的函数。

修改192.168.230.135上的list-json.html

同样的，192.168.230.135要跨域访问192.168.230.147上的list-json.php，所以对应的html代码中 <script src="http://192.168.230.147/security/list-json.php?callback=test"></script>

注意，我们包含的不是一份代码，而是以恶url地址请求，所以包含之后得到的内容将会是url地址请求之后的响应内容

3、浏览器访问

访问http://192.168.230.147/security/list-json.html，通过192.168.230.135的list-json.php代码执行之后，包含到前端页面进行回调，将可以弹窗得到192.168.230.135的数据库的json数据

image-20240812215228600

同样的，访问http://192.168.230.135/list-json.html，通过192.168230.147的list-json.php代码执行后的结果包含到前端页面，进行回调得到的是192.168.230.147的woniunote数据库中的内容

image-20240812215552160

4、思考总结

JSONP这种基于回调函数的方式，为什么可以实现跨域？

因为script标签不受同源策略的影响，再通过回调将script标签中远程包含的输出结果作为代码执行，执行的代码就是访问list-json.php的响应结果。

5、使用JQuery完成跨域回调

<script src="jquery-3.4.1.min.js"></script>
<script>
    $.getJSON("http://192.168.230.135/list-json.php?callback=test",function(data) {
        alert(JSON.stringify(data));
    });
</script>

6、JSONP跨域要点

当list-json.php实现了跨域访问后，任意网站的页面均可以访问其数据，只要知道其参数名称$_GET['callbsck']，从而在js代码（该代码执行的函数名称要和$_GET['callbsck'] 传递的参数值一样）中进行函数回调，即可完成访问。

另外一点就是将 <script src="http://192.168.230.135/list-json.php?callback=test"></script> 放在 <script> 标签中不受同源策略的影响，该标签允许跨域访问。

JSONP存在的限制：只能处理GET请求，必须经过回调，在真实场景中比较受限。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2064284.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Nginx--监控

Nginx--监控

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、Nginx的基础监控 进程监控 端口监控 注意&#xff1a; 这两个是必须要加在zabbix监控&#xff0c;加触发器有问题及时告警。 nginx 提供了ngx…
阅读更多...
8-9月强化速成｜30天带刷《严选题》《660》

8-9月强化速成｜30天带刷《严选题》《660》

如果你的目标是90-100分&#xff0c;肯定是够了&#xff0c;但是像下面这样微调一下更好 你的基础阶段做的是辅导讲义上的题目&#xff0c;那么你的基础阶段的题量肯定是够了。 但是强化阶段如果只做660题和严选题&#xff0c;这个题量还有有一些薄弱的&#xff0c;建议可以把…
阅读更多...
在线BLOG网

在线BLOG网

TOC springboot0785在线BLOG网 第1章 绪论 1.1课题背景 计算机的普及和互联网时代的到来使信息的发布和传播更加方便快捷。人们可以通过计算机上的浏览器访问多个应用系统&#xff0c;从中获取一些可以满足用户生活需求的管理系统。网站系统有时更像是一个大型“展示平台”…
阅读更多...
【MySQL】半同步模式

【MySQL】半同步模式

1 半同步模式原理 1. 用户线程写入完成后 master 中的 dump 会把日志推送到 slave 端 2.slave 中的 io 线程接收后保存到 relaylog 中继日志 3. 保存完成后 slave 向 master 端返回 ack 4. 在未接受到 slave 的 ack 时 master 端时不做提交的&#xff0c;一直处于等待当收到…
阅读更多...
Linux离线安装fontconfig

Linux离线安装fontconfig

Linux离线下载yum包&#xff0c;安装字体库 一、下载安装包 以CentOS Linux release 7.9.2009下载fontconfig的rpm包的为例 http://mirror.centos.org/centos/7/按提示跳转历史库 找到对应版本的centos https://vault.centos.org/7.9.2009/os/x86_64/Packages/在Packages目…
阅读更多...
5个免费的文章生成器，为你在线生成高质量原创文章

5个免费的文章生成器，为你在线生成高质量原创文章

在ai技术发展的今天&#xff0c;我们面对文章创作再也不用感到苦恼&#xff0c;无论是没有创作灵感&#xff0c;还是不擅长写作&#xff0c;只要有了文章生成器&#xff0c;那么它就能帮助我们轻松完成任何类型的文章创作。文章生成器虽然很强大&#xff0c;但是市面上众多的文…
阅读更多...
服务器备份

服务器备份

服务器备份 一、方案 FreeFileSync freeSSHd Windows任务计划程序 FreeFileSync&#xff1a;设置文件备份方案&#xff08;双向同步、镜像同步、更新同步、自定义同步&#xff09;&#xff0c;适用于本地的文件同步之外&#xff0c;还支持 Google Driver、SFTP 和 FTP 三种…
阅读更多...
【Docker】安装Docker环境遇到的坑（VirtualBox）

【Docker】安装Docker环境遇到的坑（VirtualBox）

利用vagrant工具在VirtualBox安装CentOS7环境后&#xff0c;安装Docker环境遇到的坑 前期准备工作 1、卸载原有环境 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engi…
阅读更多...
10 Java数据结构：包装类、数组（Array工具类）、ArrayList

10 Java数据结构：包装类、数组（Array工具类）、ArrayList

文章目录 前言一、包装类1、Integer&#xff08;1&#xff09;基本用法&#xff08;2&#xff09;JDK5前的包装类用法&#xff08;了解即可&#xff0c;能更好帮助我们理解下面的自动装箱和自动拆箱机制&#xff09;&#xff08;3&#xff09;自动装箱与自动拆箱机制 --- 导致&…
阅读更多...
bbr 收敛动力学背后的数学原理

bbr 收敛动力学背后的数学原理

我进一步把 bbr 模型简化为更一般的形式。设 x 为 bbr 流的 estimated bw&#xff0c;wₓ 为 bbr 流的 inflight&#xff0c;C 为瓶颈带宽&#xff0c;R 为传播时延&#xff0c;R_s 为总时延&#xff0c;pacing_rate 增益为 g&#xff1a; I ( t ) t o t a l _ i n f l i g h …
阅读更多...
火绒使用详解 为什么选择火绒？使用了自定义规则及其高级功能的火绒，为什么能吊打卡巴斯基，360，瑞星，惠普联想戴尔的电脑管家等？

火绒使用详解 为什么选择火绒？使用了自定义规则及其高级功能的火绒，为什么能吊打卡巴斯基，360，瑞星，惠普联想戴尔的电脑管家等？

目录 前言 必看 为什么选择火绒&#xff1f; 使用了自定义规则及其高级功能的火绒&#xff0c;为什么能吊打卡巴斯基&#xff0c;360&#xff0c;瑞星&#xff0c;惠普联想戴尔的电脑管家等&#xff1f; 原因如下&#xff1a; 火绒的主要优势 1. 轻量化设计 2. 强大的自…
阅读更多...
CocosCreator 3.8 IOS 热更新失败问题解决方案

CocosCreator 3.8 IOS 热更新失败问题解决方案

CocosCreator 3.8 IOS 热更新失败问题解决方案 问题描述 Creator 版本&#xff1a; 3.8.0目标平台&#xff1a; ios 模拟器/真机重现方式&#xff1a;安卓构建版本生成的热更新包&#xff0c;上传到OSS&#xff0c;使用ios进行更新。 19:18:36 [ERROR]: [ERROR] file /Applica…
阅读更多...
自动化测试—等待方式详解

自动化测试—等待方式详解

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 在自动化测试中&#xff0c;等待是一个重要的技术&#xff0c;用于处理页面加载、元素定位、元素状态改变等延迟问题。 等待能够确保在条件满足后再进行后续操作…
阅读更多...
Web前端：CSS篇（三）盒子模型，弹性盒子

Web前端：CSS篇（三）盒子模型，弹性盒子

CSS 盒子模型 所有HTML元素可以看作盒子&#xff0c;在CSS中&#xff0c;"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 盒子模型的作用…
阅读更多...
8.18 day bug

8.18 day bug

bug1 搞懂了用法和特性&#xff0c;bug自然而然就没了 Git branch -a 列出所以分支 git branch&#xff1a; 输入该命令后&#xff0c;会列出当前仓库中所有的分支。当前所在的分支会以星号(*)标记出来 gitpod /workspace/project (reset-orphan-branch|CHERRY-PICKING) $ g…
阅读更多...
C# SolidWorks 二次开发-103.模拟库拖拽

C# SolidWorks 二次开发-103.模拟库拖拽

最近躺平状态&#xff0c;所有没有更新。 为了搜索量再高一点&#xff0c;我决定让排名上升一个名次&#xff0c;今天来写一篇关于如何假装自己有个库。 如上图&#xff0c;进行一个拖拽示例&#xff0c;从自己的窗体中将文件带入solidworks中打开 或者 装配动作。与手动从文…
阅读更多...
Jenkins汉化配置详解

Jenkins汉化配置详解

Window安装构建神器Jenkins Window安装构建神器Jenkins详细教程-CSDN博客DevOps&#xff0c;CI&#xff0c;CD&#xff0c;自动化简单介绍选择其他需要和Jenkins一起安装的服务&#xff0c;点击Next。https://blog.csdn.net/qq_37237487/article/details/141299623 登录进入J…
阅读更多...
从新手到专家必读书籍：官方推荐.NET技术体系架构指南

从新手到专家必读书籍：官方推荐.NET技术体系架构指南

前言 Microsoft 官方推荐了一系列有关 .NET 体系结构的指南&#xff0c;旨在帮助开发人员掌握最新的技术和最佳实践。这些资源覆盖了从微服务架构到云原生应用开发等多个主题&#xff0c;是开发高质量 .NET 应用程序不可或缺的参考资料。 通过这些指南&#xff0c;可以深入了…
阅读更多...
图纸操作权限守护者：彩虹图纸管理系统的权限功能详解

图纸操作权限守护者：彩虹图纸管理系统的权限功能详解

在产品研发设计过程中&#xff0c;图纸作为核心机密资料&#xff0c;其安全性与保密性至关重要。一旦图纸发生泄密或丢失&#xff0c;将给企业带来不可估量的损失。因此&#xff0c;图纸管理系统的权限功能成为保障数据安全的重要防线。彩虹图纸管理系统凭借其强大的权限管理功…
阅读更多...
不同主机之间的网络通信学习

不同主机之间的网络通信学习

IPC 进程间通信方式 共享内存 //最高效的进程间通信方式 共享内存: 1.是一块&#xff0c;内核预留的空间 2.最高效的通信方式 //避免了用户空间 到 内核空间的数据拷贝 IPC通信方式 ---操作流程类似的 操作: system v &#xff1a; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023