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#中,你可以…...

大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
xmind转换为markdown
文章目录 解锁思维导图新姿势:将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件(ZIP处理)2.解析JSON数据结构3:递归转换树形结构4:Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...