当前位置： 首页 > news >正文

JSONP 跨域访问(1), 简介, 原理, 实验, 缺点

news 2026/2/9 10:05:48

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&#xff08;JSON with Padding&#xff09;是一种非官方跨域数据交互协议。它允许web页面从不同的域名下加载数据。 由于同源策略&#xff0c;web页面通过XMLHttpRequest调用通常只允许访问与其自身相同域名…...

编程日记 2023/11/4 9:33:14

velero备份k8s集群

流程图 velero备份原理 本地 Velero 客户端发送备份指令。Kubernetes 集群内就会创建一个 Backup 对象。BackupController 监测 Backup 对象并开始备份过程。BackupController 会向 API Server 查询相关数据。BackupController 将查询到的数据备份到远端的对象存储。 velero的…...

编程日记 2023/11/4 9:30:10

描述低轨星座的特点和通信挑战，以及它们在5G和B5G中的作用。

文章目录 2章4 章5章&#xff08;没看&#xff09;6章&#xff08;没看&#xff09; 2章 将卫星星座中每个物理链路中可实现的数据速率、传播延迟和多普勒频移与3GPP技术报告中的参数进行分析和比较[3]。 相关配置 面向连接的网络&#xff0c;预先简历链路 卫星和地面终端有…...

编程日记 2023/11/4 9:29:09

Spring Boot实践 --windows环境下 K8s 部署 Docker

第一步&#xff1a;搭建项目并制作合适的jar包 这里我们准备好前面项目 用户管理系统 项目里的jar包。测试功能&#xff0c;定时任务会每过10s打印一次日志&#xff1a; E:\test>java -jar demospringboot-0.0.1-SNAPSHOT.jar2023-11-01 20:24:21.059 INFO 11848 --- [ …...

编程日记 2023/11/4 9:28:08

Linux 将Qt程序打包为AppImage包

前言 在 Linux 环境下&#xff0c;开发完 Qt 程序后&#xff0c;也需要制作为一个安装包或者可执行文件进行分发。这里介绍使用 linuxdeployqt 将 Qt 程序打包为 .AppImage 应用程序&#xff08;类似于 Windows 的绿色免安装软件&#xff09; 环境配置 配置 Qt 环境变量 这…...

编程日记 2023/11/4 9:27:06

修复国产电脑麒麟系统开机出现initramfs 问题

目录预览 一、问题描述二、原因分析三、解决方案四、知识点呀initramfsBusyBox 五、参考链接 一、问题描述 国产麒麟系统出现 initramfs 模式 二、原因分析 一般在拷贝卡顿过程【强制关机】或者电【脑异常断电】的情况下概率性导致系统分区损坏&#xff0c;重启后大概率就会进…...

编程日记 2023/11/4 9:26:03

机器人控制算法—如何使用C++读取pgm格式的栅格地图并转化为ROS地图格式的data?

1.Introduction 近期正在做全局规划局部动态规划的项目&#xff0c;目前遇到的问题是&#xff0c;我们如何利用C处理pgm地图文件。即将地图信息要与像素点结合起来。所以我们需要知道地图读取和处理的底层原理&#xff0c;这样更好地在非ROS平台下移植。 2.Main 如下几条信息…...

编程日记 2023/11/4 9:24:00

牛客项目（五）-使用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…...

编程日记 2023/11/4 9:21:56

计算机网络——第一章时延部分深入学习、相关习题及详细解析

目录 时延相关 习题1 习题1-改 习题2 时延相关 之前我们学习过&#xff0c;时延由发送时延、传播时延和处理时延三部分构成。 发送时延的计算公式为“分组长度除以发送速率”&#xff0c; 发送速率应该从网卡速率、信道带宽、以及对端的接口速率中取最小。 传播时延的计…...

编程日记 2023/11/4 9:20:56

CSS3媒体查询与页面自适应

2017年9月&#xff0c;W3C发布媒体查询(Media Query Level 4)候选推荐标准规范&#xff0c;它扩展了已经发布的媒体查询的功能。该规范用于CSS的media规则&#xff0c;可以为文档设定特定条件的样式&#xff0c;也可以用于HTML、JavaScript等语言。 1、媒体查询基础 媒体查询…...

编程日记 2023/11/4 9:19:54

UG\NX二次开发 超长的对象属性值，怎么设置

文章作者：里海 来源网站：里海NX二次开发3000例专栏 感谢粉丝订阅 感谢 Dr. Lin 订阅本专栏，非常感谢。 简介 使用UF_ATTR_assign设置对象属性，如果属性值超过UF_ATTR_MAX_STRING_LEN则会报错。 #define UF_ATTR_MAX_STRING_LEN 132 怎么办呢？下面这种方法可以解决： 效果 …...

编程日记 2023/11/4 9:18:52

流媒体服务实现H5实时预览视频

目录 背景方案业务实践细节注意 待办 背景 客户aws服务磁盘存储告急&#xff0c;最高可扩容16T。排查如下&#xff1a;主要是视频文件存在大量复制使用的情况。例如发布节目时复制、预览时复制&#xff0c;这样上传一份视频后最大会有四份拷贝&#xff08;预览、普通发布、互动…...

编程日记 2023/11/4 9:17:51

C++适配器

文章目录 引言栈和队列 priority_queue仿函数迭代器区间 引言 栈的特性是先进后出&#xff0c;队列的特性是先进先出&#xff0c;然而双向队列同时具有栈和队列的特性&#xff0c;所以我们可以通过双向队列来适配出栈和队列。 先看库里面 栈和队列 stack和queue模板参数里面都…...

编程日记 2023/11/4 9:15:48

基于openresty waf二次开发多次匹配到的ip再做拉黑

我们想在openresty waf的基础上做二次开发&#xff0c;比如再精确一些。比如我们先匹配到了select的url我们先打分10分&#xff0c;匹配到cc 1000/s我们再给这个ip打10分…直到100分我们就拉黑这个ip。 [openresty waf][1] #cat reids_w.lua require lib local redis require…...

编程日记 2023/11/4 9:14:47

新一代构建工具Vite-xyphf

一、什么vite? vite:是一款思维比较前卫而且先进的构建工具,他解决了一些webpack解决不了的问题——在开发环境下可以实现按需编译&#xff0c;加快了开发速度。而在生产环境下&#xff0c;它使用Rollup进行打包&#xff0c;提供更好的tree-shaking、代码压缩和性能优化&…...

编程日记 2023/11/4 9:12:45

Flink源码解析三之执行计划⽣成

JobManager Leader 选举 首先flink会依据配置获取RecoveryMode,RecoveryMode一共两两种:STANDALONE和ZOOKEEPER。 如果用户配置的是STANDALONE,会直接去配置中获取JobManager的地址如果用户配置的是ZOOKEEPER,flink会首先尝试连接zookeeper,利用zookeeper的leadder选举服务发现…...

编程日记 2023/11/4 9:11:43

Flutter 常见错误记录总结

1、当 flutter pub get 指令报如下错误时&#xff1a; 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…...

编程日记 2023/11/4 9:10:42

[ASP]校无忧在线报名系统 v2.1

校无忧在线报名系统为了满足各地不同的报名人员的需求&#xff0c;为提供更为高效、方便、快捷的报名条件&#xff0c;同时也为减轻管理人员的工作难度&#xff1b;更为协调报名人员与管理人员的关系&#xff0c;快速提高了报名人员与管理人员的工作效率应运而生。系统适用于政…...

编程日记 2023/11/4 9:09:39

【Hydro】部分基流分割方法及程序代码说明

目录 说明一、数字滤波法单参数数字滤波Lyne-Hollick滤波法Chapman滤波法Chapman-Maxwell滤波法Boughton-Chapman滤波法 双参数滤波法Eckhardt滤波法 二、其他基流分割方法基流指数&#xff08;BFI&#xff09;法时间步长&#xff08;HYSEP&#xff09;法PART法加里宁-阿里巴扬…...

编程日记 2023/11/4 9:08:38

C#Regex正则表达式（Regular Expression）

在C#中&#xff0c;Regex是正则表达式&#xff08;Regular Expression&#xff09;的缩写&#xff0c;它是一种强大的文本匹配和处理工具。正则表达式是一种用于描述模式的字符串&#xff0c;它可以用来在文本中查找、替换和提取满足特定模式的内容。 在C#中&#xff0c;你可以…...

编程日记 2023/11/4 9:07:36

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/1/27 17:31:07

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2026/2/6 4:24:06

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2026/2/9 9:22:40

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2026/2/6 5:56:22

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2026/2/7 0:29:10

JavaScript 标签加载

目录 JavaScript 标签加载script 标签的 async 和 defer 属性&#xff0c;分别代表什么&#xff0c;有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...

编程新知 2025/10/2 20:58:12

6.计算机网络核心知识点精要手册

计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法&#xff1a;数据与控制信息的结构或格式&#xff0c;如同语言中的语法规则语义&#xff1a;控制信息的具体含义和响应方式&#xff0c;规定通信双方"说什么"同步&#xff1a;事件执行的顺序与时序…...

编程新知 2025/9/26 21:47:06

HTML中各种标签的作用

一、HTML文件主要标签结构及说明 1. <&#xff01;DOCTYPE html> 作用&#xff1a;声明文档类型&#xff0c;告知浏览器这是 HTML5 文档。 必须&#xff1a;是。 2. <html lang“zh”>. </html> 作用&#xff1a;包裹整个网页内容&#xff0c;lang"z…...

编程新知 2025/12/26 3:00:15