JSONP 跨域访问(1), 简介, 原理, 实验, 缺点
JSONP 跨域访问(1), 简介, 原理, 实验, 缺点
一, JSONP 简介
JSONP（JSON with Padding）是一种非官方跨域数据交互协议。它允许web页面从不同的域名下加载数据。
由于同源策略，web页面通过XMLHttpRequest调用通常只允许访问与其自身相同域名的资源。
JSONP是一种在早期浏览器中绕过这一限制的方法。
<script> 标签天生就拥有跨域请求的能力，这是由浏览器的同源策略所允许的。
这种特性被用于加载来自不同源（域名、协议或端口）的 JavaScript 文件，例如，从 CDN（内容分发网络）加载库或框架。
JSONP（JSON with Padding）正是基于这个能力来实现跨域请求的。通过动态创建一个
二, JSONP 工作原理
1. 客户端发起请求：
客户端通过<script>标签发起一个GET请求。请求的URL包含一个查询参数，通常是callback，它的值是一个将被服务器端调用的函数名。
2. 服务器端响应：
服务器端收到请求后，会将数据封装在一个函数调用中。这个函数就是请求URL中指定的callback参数的值。
3. 客户端处理：
响应返回给客户端后，由于是<script>标签的请求，所以返回的JavaScript代码会立即执行。
此时，客户端已经定义了一个与callback参数值相同名字的函数，因此，这个函数会被调用，并传入解析后的JSON数据作为参数。
4. 完成交互：
客户端的回调函数执行，处理传入的数据。
三, 代码实验
1. 环境准备
192.168.112.200 html页面
192.168.112.202 php脚本
2. 实验目的:
访问200上的html页面, 由html跨域访问202上的php脚本.
3. 实验过程:
(1)在200服务器上准备一个jsonp.html页面:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript">// 这里定义你的回调函数function jsonpCallback(data) {// 处理JSON数据的代码console.log(data);}</script> <script type="text/javascript" src="http://192.168.112.202/security/jsonp.php?callback=jsonpCallback"></script>
</head><body></body></html>
这个页面定义了一个回调函数jsonpCallback(), 它用于处理响应的json.
然后通过一个<script>标签向202服务器发送GET请求, 通过callback参数传入函数名.
(2) 在202服务器上准备一个jsonp.php脚本.
<?php
$person = array("name" => "John Doe","age" => "30","occupation" => "Developer"
);
$jsonString = json_encode($person);
echo $_GET['callback'] . "(" . $jsonString . ")";
?>
服务器这段代码生成一个叫做jsonString的json字符串, 返回的数据通过拼接而成, 前面是GET传递过来的参数值$_GET['callback'], 后面是被括号括起来的json数据"(" . $jsonString . ")".
(3) 访问200服务器上的jsonp.html页面:
http://192.168.112.200/jsonp/jsonp.html
上面的url向200服务器发送GET请求访问页面, 传入参数callback=jsonpCallback.
接下来200服务器上的jsonp.php执行, 生成json字符串, $_GET['callback'] 的值由前端传过来是jsonpCallback, 那么最后拼接出来就是:
jsonpCallback({"name": "John Doe", "age": "30", "occupation": "Developer"});
可以看到服务器就是返回了一段js代码, 因为前端是使用<script>标签请求的js, 所以响应返回后, 前端会立刻执行返回的js代码, 而这段代码是调用前端定义的jsonpCallback()函数, 并传入服务器生成的json字符串做进一步处理.
四, JSONP的缺点
现在使用 JSONP 进行跨域请求的情况已经不太常见了。主要原因是它的安全问题和功能限制，尤其是以下几点：
1. 安全性：
JSONP 非常容易受到跨站脚本攻击（XSS）的影响。因为它通过 <script> 标签接收执行代码，如果攻击者可以控制 JSONP 响应，他们可以在用户的浏览器中执行恶意代码。
2. 受限的HTTP方法：
JSONP 只能进行 GET 请求，不能使用 POST、PUT、DELETE 等 HTTP 方法，这在现代应用程序中是一个严重的限制。
3. 缺乏错误处理：
在 JSONP 中，如果请求失败，很难准确地捕捉到错误并进行处理，因为 <script> 标签没有提供标准的错误监听机制。
4. 缺乏直接支持：
JSONP 需要服务器特别支持返回 JSONP 响应，这需要服务器端进行额外的编码工作。
相比之下，CORS（跨源资源共享）是一个 W3C 标准，现代浏览器都支持这个标准。
CORS 允许浏览器向另一个域名的服务器发送XMLHttpRequest或 Fetch API 请求，只要服务器返回正确的 CORS 响应头，就能够实现安全的跨域请求。
因为 CORS 提供了更细粒度的控制，更好的安全性和更全面的HTTP方法支持，所以它已经成为了处理跨域请求的首选方式。
在新的Web应用中，建议使用 CORS 而不是 JSONP。
相关文章：
, 简介, 原理, 实验, 缺点)
JSONP 跨域访问(1), 简介, 原理, 实验, 缺点
JSONP 跨域访问(1), 简介, 原理, 实验, 缺点 一, JSONP 简介 JSONP（JSON with Padding）是一种非官方跨域数据交互协议。它允许web页面从不同的域名下加载数据。 由于同源策略，web页面通过XMLHttpRequest调用通常只允许访问与其自身相同域名…...
velero备份k8s集群
流程图 velero备份原理 本地 Velero 客户端发送备份指令。Kubernetes 集群内就会创建一个 Backup 对象。BackupController 监测 Backup 对象并开始备份过程。BackupController 会向 API Server 查询相关数据。BackupController 将查询到的数据备份到远端的对象存储。 velero的…...
描述低轨星座的特点和通信挑战，以及它们在5G和B5G中的作用。
文章目录 2章4 章5章（没看）6章（没看） 2章 将卫星星座中每个物理链路中可实现的数据速率、传播延迟和多普勒频移与3GPP技术报告中的参数进行分析和比较[3]。 相关配置 面向连接的网络，预先简历链路 卫星和地面终端有…...
Spring Boot实践 --windows环境下 K8s 部署 Docker
第一步：搭建项目并制作合适的jar包 这里我们准备好前面项目 用户管理系统 项目里的jar包。测试功能，定时任务会每过10s打印一次日志： E:\test>java -jar demospringboot-0.0.1-SNAPSHOT.jar2023-11-01 20:24:21.059 INFO 11848 --- [ …...
Linux 将Qt程序打包为AppImage包
前言 在 Linux 环境下，开发完 Qt 程序后，也需要制作为一个安装包或者可执行文件进行分发。这里介绍使用 linuxdeployqt 将 Qt 程序打包为 .AppImage 应用程序（类似于 Windows 的绿色免安装软件） 环境配置 配置 Qt 环境变量 这…...
修复国产电脑麒麟系统开机出现initramfs 问题
目录预览 一、问题描述二、原因分析三、解决方案四、知识点呀initramfsBusyBox 五、参考链接 一、问题描述 国产麒麟系统出现 initramfs 模式 二、原因分析 一般在拷贝卡顿过程【强制关机】或者电【脑异常断电】的情况下概率性导致系统分区损坏，重启后大概率就会进…...
机器人控制算法—如何使用C++读取pgm格式的栅格地图并转化为ROS地图格式的data?
1.Introduction 近期正在做全局规划局部动态规划的项目，目前遇到的问题是，我们如何利用C处理pgm地图文件。即将地图信息要与像素点结合起来。所以我们需要知道地图读取和处理的底层原理，这样更好地在非ROS平台下移植。 2.Main 如下几条信息…...
牛客项目（五）-使用kafka实现发送系统通知
kafka入门以及与spring整合 Message.java import java.util.Date;public class Message {private int id;private int fromId;private int toId;private String conversationId;private String content;private int status;private Date createTime;public int getId() {retur…...
计算机网络——第一章时延部分深入学习、相关习题及详细解析
目录 时延相关 习题1 习题1-改 习题2 时延相关 之前我们学习过，时延由发送时延、传播时延和处理时延三部分构成。 发送时延的计算公式为“分组长度除以发送速率”， 发送速率应该从网卡速率、信道带宽、以及对端的接口速率中取最小。 传播时延的计…...
CSS3媒体查询与页面自适应
2017年9月，W3C发布媒体查询(Media Query Level 4)候选推荐标准规范，它扩展了已经发布的媒体查询的功能。该规范用于CSS的media规则，可以为文档设定特定条件的样式，也可以用于HTML、JavaScript等语言。 1、媒体查询基础 媒体查询…...
UG\NX二次开发 超长的对象属性值，怎么设置
文章作者：里海 来源网站：里海NX二次开发3000例专栏 感谢粉丝订阅 感谢 Dr. Lin 订阅本专栏，非常感谢。 简介 使用UF_ATTR_assign设置对象属性，如果属性值超过UF_ATTR_MAX_STRING_LEN则会报错。 #define UF_ATTR_MAX_STRING_LEN 132 怎么办呢？下面这种方法可以解决： 效果 …...
流媒体服务实现H5实时预览视频
目录 背景方案业务实践细节注意 待办 背景 客户aws服务磁盘存储告急，最高可扩容16T。排查如下：主要是视频文件存在大量复制使用的情况。例如发布节目时复制、预览时复制，这样上传一份视频后最大会有四份拷贝（预览、普通发布、互动…...
C++适配器
文章目录 引言栈和队列 priority_queue仿函数迭代器区间 引言 栈的特性是先进后出，队列的特性是先进先出，然而双向队列同时具有栈和队列的特性，所以我们可以通过双向队列来适配出栈和队列。 先看库里面 栈和队列 stack和queue模板参数里面都…...
基于openresty waf二次开发多次匹配到的ip再做拉黑
我们想在openresty waf的基础上做二次开发，比如再精确一些。比如我们先匹配到了select的url我们先打分10分，匹配到cc 1000/s我们再给这个ip打10分…直到100分我们就拉黑这个ip。 [openresty waf][1] #cat reids_w.lua require lib local redis require…...
新一代构建工具Vite-xyphf
一、什么vite? vite:是一款思维比较前卫而且先进的构建工具,他解决了一些webpack解决不了的问题——在开发环境下可以实现按需编译，加快了开发速度。而在生产环境下，它使用Rollup进行打包，提供更好的tree-shaking、代码压缩和性能优化&…...
Flink源码解析三之执行计划⽣成
JobManager Leader 选举 首先flink会依据配置获取RecoveryMode,RecoveryMode一共两两种:STANDALONE和ZOOKEEPER。 如果用户配置的是STANDALONE,会直接去配置中获取JobManager的地址如果用户配置的是ZOOKEEPER,flink会首先尝试连接zookeeper,利用zookeeper的leadder选举服务发现…...
Flutter 常见错误记录总结
1、当 flutter pub get 指令报如下错误时： pub get failed command: "/Users/***/developer/flutter/bin/cache/dart-sdk/bin/dart __deprecated_pub --color --directory . get --example" pub env: { "FLUTTER_ROOT": "/Users/***/dev…...
[ASP]校无忧在线报名系统 v2.1
校无忧在线报名系统为了满足各地不同的报名人员的需求，为提供更为高效、方便、快捷的报名条件，同时也为减轻管理人员的工作难度；更为协调报名人员与管理人员的关系，快速提高了报名人员与管理人员的工作效率应运而生。系统适用于政…...
【Hydro】部分基流分割方法及程序代码说明
目录 说明一、数字滤波法单参数数字滤波Lyne-Hollick滤波法Chapman滤波法Chapman-Maxwell滤波法Boughton-Chapman滤波法 双参数滤波法Eckhardt滤波法 二、其他基流分割方法基流指数（BFI）法时间步长（HYSEP）法PART法加里宁-阿里巴扬…...
C#Regex正则表达式（Regular Expression）
在C#中，Regex是正则表达式（Regular Expression）的缩写，它是一种强大的文本匹配和处理工具。正则表达式是一种用于描述模式的字符串，它可以用来在文本中查找、替换和提取满足特定模式的内容。 在C#中，你可以…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...
免费数学几何作图web平台
光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
第7篇：中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中，可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中，必须做到： 🔍 追踪每一条 SQL 的生命周期（从入口到数据库执行）&#…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...
【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么，为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中，我们在使用电子设备时，我们所输入执行的每一条指令最终大多都会作用到硬件上，比如下载一款软件最终会下载到硬盘上&am…...
GraphQL 实战篇：Apollo Client 配置与缓存
GraphQL 实战篇：Apollo Client 配置与缓存 上一篇：GraphQL 入门篇：基础查询语法 依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...
k8s从入门到放弃之Pod的容器探针检测
k8s从入门到放弃之Pod的容器探针检测 在Kubernetes（简称K8s）中，容器探测是指kubelet对容器执行定期诊断的过程，以确保容器中的应用程序处于预期的状态。这些探测是保障应用健康和高可用性的重要机制。Kubernetes提供了两种种类型…...