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

JSONP跨域原理全解析

article 2025/6/1 7:59:13

JSONP（JSON with Padding）是一种绕过浏览器同源策略限制、实现跨域数据请求的“hack”式方案。其核心原理和流程如下：

  1. 同源策略限制
    浏览器为了安全，只允许页面从与当前页面相同协议、域名、端口的服务器加载数据。而 <script>、<img>、<link> 等标签对跨域不受同源策略限制——只要目标资源返回有效内容，浏览器就会加载并执行。

  2. 利用 <script> 标签跨域
    JSONP 利用该特性：前端通过动态创建一个 <script> 标签，设置其 src 属性指向目标跨域接口，并带上一个回调函数名参数，比如：

    <script>function handle(data) {console.log('服务器返回的数据：', data);}var script = document.createElement('script');script.src = 'https://api.example.com/data?callback=handle';document.head.appendChild(script);
</script>

  3. 服务器端“打包”返回
    服务器接收到请求后，不是直接返回纯 JSON，而是把 JSON 数据“包裹”（padding）在指定的回调函数调用里，例如：

    handle({"name": "Alice","age": 30
});

    浏览器加载这个脚本时，就会立即执行 handle(...)，把数据当作参数传入页面上事先定义好的回调函数。

  4. 流程图示

    1. 页面定义全局回调函数 handle。
    2. 页面动态插入 <script src="...callback=handle">。
    3. 浏览器向跨域服务器发送 GET 请求。
    4. 服务器将 JSON 数据封装成 handle(JSON) 格式的脚本返回。
    5. 浏览器下载并执行该脚本，触发全局回调函数，拿到数据。

  5. 优缺点

    • 优点
      • 简单，无需 CORS 支持即可跨域请求 GET 接口。
    • 缺点
      • 仅支持 GET 请求，不支持 POST、PUT 等。
      • 安全性较差，容易受到 XSS 攻击（调用任意脚本）。
      • 回调地狱：多个并发请求时需要管理不同回调名。

  6. 现代替代
    随着 CORS（跨域资源共享）和 fetch/XMLHttpRequest 支持跨域请求，JSONP 已被逐步淘汰，仅在极少数不支持 CORS 的老旧环境下使用。

示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>JSONP 示例</title><script>// 全局回调函数function jsonpCallback(data) {document.getElementById('output').textContent ='Hello, ' + data.name + '，你 ' + data.age + ' 岁了！';}// 动态加载 JSONP 脚本function loadData() {const script = document.createElement('script');script.src = 'https://api.example.com/user?callback=jsonpCallback';document.head.appendChild(script);}</script>
</head>
<body><button onclick="loadData()">获取用户信息</button><div id="output"></div>
</body>
</html>

上述例子中，当点击按钮时，会向 https://api.example.com/user?callback=jsonpCallback 发起跨域请求，服务器返回：

jsonpCallback({ "name": "Bob", "age": 25 });

浏览器执行该脚本，直接调用页面上的 jsonpCallback，完成数据读取和展示。

相关文章：

JSONP跨域原理全解析

JSONP&#xff08;JSON with Padding&#xff09;是一种绕过浏览器同源策略限制、实现跨域数据请求的“hack”式方案。其核心原理和流程如下&#xff1a; 同源策略限制 浏览器为了安全&#xff0c;只允许页面从与当前页面相同协议、域名、端口的服务器加载数据。而 <script&…...

编程日记 2025/5/30 11:31:36

【MySQL】第11节｜MySQL 8.0 主从复制原理分析与实战（一）

一、MySQL主从复制基础 1. 核心概念 定义&#xff1a; MySQL主从复制是将主库&#xff08;Source/Master&#xff09;的数据变更同步到一个或多个从库&#xff08;Replica/Slave&#xff09;的机制&#xff0c;默认采用异步复制&#xff0c;支持全库、指定库或表的同步。 角…...

编程日记 2025/5/30 11:41:37

全志F1c200开发笔记——移植根文件系统

1.下载buildroot Index of /downloads/ 使用2018.02.11版本 直链下载 https://buildroot.org/downloads/buildroot-2018.02.11.tar.gz 2.配置 进入buildroot压缩包目录下&#xff0c;使用命令解压并进入工作目录 tar -xf buildroot-2018.02.11.tar.gz cd buildroot-2018.…...

编程日记 2025/6/1 4:27:34

[yolov11改进系列]基于yolov11引入自注意力与卷积混合模块ACmix提高FPS+检测效率python源码+训练源码

[ACmix的框架原理] 1.1 ACMix的基本原理 ACmix是一种混合模型&#xff0c;结合了自注意力机制和卷积运算的优势。它的核心思想是&#xff0c;传统卷积操作和自注意力模块的大部分计算都可以通过1x1的卷积来实现。ACmix首先使用1x1卷积对输入特征图进行投影&#xff0c;生成一组…...

编程日记 2025/5/31 13:42:40

Java NIO编程：构建高性能网络应用

1.Java NIO 核心概念与架构 1. 传统 BIO 与 NIO 的对比 特性 BIO (Blocking I/O) NIO (Non-blocking I/O) I/O 模型 阻塞 非阻塞 / 异步 线程模式 每个连接一个线程 单线程管理多个连接 数据处理单位 字节流 / 字符流 缓冲区 (Buffer) 核心组件 Socket, ServerSoc…...

编程日记 2025/5/31 23:48:28

如何实现高性能超低延迟的RTSP或RTMP播放器

随着直播行业的快速发展&#xff0c;RTSP和RTMP协议成为了广泛使用的流媒体传输协议&#xff0c;尤其是在实时视频直播领域&#xff0c;如何构建一个高性能超低延迟的直播播放器&#xff0c;已经成为了决定直播平台成功与否的关键因素之一。作为音视频直播SDK技术老兵&#xff…...

编程日记 2025/5/30 12:25:32

每天掌握一个Linux命令 - sar

Linux 系统监控工具 sar 使用指南 一、工具概述 sar&#xff08;System Activity Reporter&#xff09; 是 Linux 下功能强大的系统活动报告工具&#xff0c;属于 sysstat 软件包的核心组件。它通过采集系统资源&#xff08;CPU、内存、磁盘、网络、进程等&#xff09;的使用…...

编程日记 2025/6/1 2:31:38

RabbitMQ 集群与高可用方案设计（三）

五、高可用方案设计与实现 &#xff08;一&#xff09;负载均衡与代理 1. HAProxy 配置 HAProxy 是一款广泛应用的开源负载均衡器和代理服务器&#xff0c;它能够实现对 RabbitMQ 集群节点的负载均衡和健康检查&#xff0c;有效提高系统的可用性和性能。以下是使用 HAProxy …...

编程日记 2025/6/1 4:34:19

Linux的读写屏障

在 Linux 中&#xff0c;读写屏障&#xff08;Read-Write Barriers&#xff0c;简称 RWB&#xff09;是对内存访问顺序的一种控制机制&#xff0c;用来保证在多核处理器环境下&#xff0c;内存访问的正确顺序&#xff0c;避免因乱序执行导致的数据一致性问题。它是操作系统内核…...

编程日记 2025/5/30 23:53:37

Vue中的 VueComponent

VueComponent 组件的本质 Vue 组件是一个可复用的 Vue 实例。每个组件本质上就是通过 Vue.extend() 创建的构造函数&#xff0c;或者在 Vue 3 中是由函数式 API&#xff08;Composition API&#xff09;创建的。 // Vue 2 const MyComponent Vue.extend({template: <div…...

编程日记 2025/5/31 19:44:07

C语言数据结构-单向链表

头文件&#xff1a;link.h #ifndef __LINK_H__ #define __LINK_H__ #include <stdio.h> #include <stdlib.h> typedef int DataType; /*节点数据类型*/ typedef struct node { DataType data; //数据域 struct node *pNext; //指…...

编程日记 2025/6/1 4:54:16

小样本分类新突破：QPT技术详解

问题导向式提示调优（QPT） 这篇论文主要讲了一个针对小样本（数据量少）文本分类问题的新方法，叫问题导向式提示调优（QPT）。 核心思路是让预训练语言模型（比如BERT的升级版RoBERTa）在少量标注数据下，通过设计特定的“提问式模板”和“标签词扩展技术”来提升分类效果。…...

编程日记 2025/5/31 16:05:20

Excel常用公式全解析（1）：从基础计算到高级应用

Excel常用公式全解析&#xff1a;从基础计算到高级应用 目录 Excel常用公式全解析&#xff1a;从基础计算到高级应用[toc](目录)一、基础计算类&#xff1a;数据运算的基石1. 求和公式&#xff08;SUM&#xff09;2. 平均值公式&#xff08;AVERAGE&#xff09;3. 最值与计数公…...

编程日记 2025/5/31 16:55:36

C++ STL 容器：List 深度解析与实践指南

一、List 容器概述 1.1底层结构与特性 数据结构&#xff1a;双向循环链表&#xff08;带哨兵位头结点&#xff09;&#xff0c;每个节点包含前驱指针、后继指针和数据域。核心优势&#xff1a; 高效插入 / 删除&#xff1a;任意位置操作时间复杂度为 O (1)&#xff0c;无需移…...

编程日记 2025/5/29 3:15:42

每天掌握一个Linux命令 - ab（Apache Benchmark）

Linux 命令工具 ab 使用指南 一、工具概述 ab&#xff08;Apache Benchmark&#xff09; 是 Apache 官方提供的开源压力测试工具&#xff0c;用于衡量 Web 服务器的性能。它通过模拟多并发请求&#xff0c;测试服务器在高负载下的响应速度、吞吐量和稳定性&#xff0c;常用于…...

编程日记 2025/5/30 11:48:04

与 PyCharm 官方沟通解决开发环境问题记录（进展：官方已推出2个新的修复版本）

​​​​​​主题&#xff1a;有关 PyCharm 中终端和环境激活问题的反馈&#xff1a;PY-81233 前言 目前进展&#xff1a; 官方已有2个修复版本推出测试。 更新方法&#xff1a; 使用JetBrains Toolbox App&#xff0c;如下图所示&#xff0c;从“其他版本”进入查看更新。…...

编程日记 2025/5/31 17:08:55

Python的分布式网络爬虫系统实现

1. 系统架构概述 一个典型的分布式网络爬虫系统通常包含以下几个核心组件&#xff1a; 1.主节点&#xff08;Master Node&#xff09;&#xff1a; 任务调度&#xff1a;负责将抓取任务分配给各个工作节点。URL 管理&#xff1a;维护待抓取的 URL 队列和已抓取的 URL 集合&a…...

编程日记 2025/5/29 3:00:23

Vue快速上手(业务、技术、报错)

Vue 技术业务报错 技术 业务 Vueelement-ui&#xff0c;实现表格渲染缩略图&#xff0c;鼠标悬浮缩略图放大&#xff0c;点击缩略图播放视频&#xff08;一&#xff09; 报错 vue修改配置文件.env.development不生效 vue前端downloadFile报错&#xff1a;Error parsing HT…...

编程日记 2025/5/30 21:02:30

taro + vue3 实现小程序sse长连接实时对话

前言 taro.request是可以实现sse长连接的&#xff0c;但是呢其中有俩大坑&#xff0c;找了许多资料也没解决&#xff0c;后续解决办法也与后端商量改用WebSocket来实现。 代码实现 SSEManager.js: import { getAccessToken } from "../xx/xx"; import { TextDecode…...

编程日记 2025/5/31 22:13:39

使用MATLAB求解微分方程：从基础到实践

使用MATLAB求解微分方程&#xff1a;从基础到实践 微分方程是描述自然界和工程领域中许多现象的重要数学工具。MATLAB提供了强大的工具来求解各种类型的微分方程。本文将介绍如何使用MATLAB求解常微分方程(ODE)。 1. 基本ODE求解器 MATLAB提供了多种ODE求解器&#xff0c;最…...

编程日记 2025/5/30 19:25:45

基于MATLAB的大规模MIMO信道仿真

1. 系统模型与参数设置 以下是一个单小区大规模MIMO系统的参数配置示例&#xff0c;适用于多发多收和单发单收场景。 % 参数配置 params.N_cell 1; % 小区数量&#xff08;单小区仿真&#xff09; params.cell_radius 500; % 小区半径&#xff08;米&#xff09…...

编程日记 2025/5/29 2:49:08

如何在 Windows 和 Mac 上擦拭和清洁希捷外置硬盘

希捷外置硬盘广泛用于存储目的&#xff0c;但有时您可能出于多种目的需要擦除或清洁希捷外置硬盘&#xff0c;例如转售、重复使用、捐赠等。为了释放硬盘上的存储空间或确保没有人可以从硬盘中恢复您的信息&#xff0c;擦除硬盘是必要的步骤。无论您使用的是 Windows 还是 Mac&…...

编程日记 2025/6/1 2:27:35

Vue 3.0 中状态管理Vuex 与 Pinia 的区别

在 Vue.js 应用开发中&#xff0c;状态管理是构建复杂应用的关键环节。随着 Vue 3 的普及和 Composition API 的引入&#xff0c;开发者面临着状态管理库的选择问题&#xff1a;是继续使用经典的 Vuex&#xff0c;还是转向新兴的 Pinia&#xff1f;本文将从设计理念、API 设计、…...

编程日记 2025/5/30 11:50:13

第三届黄河流域网安技能挑战赛复现

Web 奶龙牌图片处理器2.0 这题&#xff0c;之前只了解过 .user.ini 文件&#xff0c;并为遇到实操题 但赛前差点就做到下面这题了&#xff0c;不多说&#xff0c;复现之前先看看下面这题 靶场&#xff1a; 攻防世界 没错&#xff0c;又做上文件上传题了&#xff0c;别看…...

编程日记 2025/6/1 7:23:07

pyｔｈｏｎ 生成复杂表格，自动分页等功能

py&#xff54;&#xff48;&#xff4f;&#xff4e; 生成复杂表格&#xff0c;自动分页等功能 解决将Python中的树形目录数据转换为Word表格&#xff0c;并生成带有合并单元格的检测报告的问题。首先&#xff0c;要解决“tree目录数据”和“Word表格互换”&#xff0c;指将树…...

编程日记 2025/5/31 23:25:56

2025年高防IP与游戏盾深度对比：如何选择最佳防护方案？

2025年&#xff0c;随着DDoS攻击规模的指数级增长和混合攻击的常态化&#xff0c;高防IP与游戏盾成为企业网络安全的核心选择。然而&#xff0c;两者在功能定位、技术实现及适用场景上存在显著差异。本文结合最新行业实践与技术趋势&#xff0c;全面解析两者的优劣&#xff0c;…...

编程日记 2025/5/31 11:38:31

在 Vue + Vite 项目中，直接使用相对路径或绝对路径引用本地图片资源时，图片无法正确显示。

Vue 项目中静态资源引用问题 1.问题描述 在 Vue Vite 项目中&#xff0c;直接使用相对路径或绝对路径引用本地图片资源时&#xff0c;图片无法正确显示。 错误示例 javascript // 错误方式1&#xff1a;使用相对路径 const products [ { name: iPhone 14 Pro, image: .…...

编程日记 2025/5/30 12:17:12

判断手机屏幕上的横向滑动（左滑和右滑）

在JavaScript中&#xff0c;你可以通过监听触摸事件&#xff08;touch events&#xff09;来判断用户在手机屏幕上的横向滑动方向。以下是实现方法&#xff1a; 基本实现方案 let touchStartX 0; let touchEndX 0;function handleTouchStart(event) {touchStartX event.ch…...

编程日记 2025/5/29 2:35:49

用户有一个Django模型没有设置主键，现在需要设置主键。

用户有一个Django模型没有设置主键&#xff0c;现在需要设置主键。 from django.db import modelsclass CategoryAssistentModel(models.Model):second_level_category models.CharField(max_length100, nullTrue, blankTrue)third_level_category models.CharField(max_len…...

编程日记 2025/5/30 11:52:35

【文献阅读】EndoChat: Grounded Multimodal Large Language Model for Endoscopic Surgery

[2501.11347] EndoChat: Grounded Multimodal Large Language Model for Endoscopic Surgery 2025年1月 数据可用性 Surg-396K 数据集可在 GitHub - gkw0010/EndoChat 公开获取。 代码可用性 EndoChat 的代码可在 GitHub - gkw0010/EndoChat 下载。 摘要 近年来&#xff…...

编程日记 2025/6/1 5:20:33