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

【前端】【业务逻辑】【面试】JSONP处理跨域原理与封装

news 来源：原创 2025/7/18 2:30:24

🧠 一、JSONP 是什么？

项目	内容
📌 全称	JSON with Padding
📍 用途	跨域请求数据的一种方式，绕过同源策略
📦 本质	通过 `<script>` 标签加载远程 JS 文件，这个文件执行一个回调函数并传入数据

🔍 二、JSONP 工作原理（层层递进）

定义全局回调函数

function jsonpCallback(data) { console.log(data); }

创建 <script> 标签并设置 src

script.src = 'http://example.com/api?callback=jsonpCallback';

服务器响应 JavaScript 代码
```
jsonpCallback({ name: "Tom" });
```
浏览器执行返回的代码
- 调用了你定义的 jsonpCallback 函数
- 参数就是服务端返回的数据 ✅

❌ 三、常见错误

错误	原因	解决方式
`meta charset="UTF - 8"`	有空格，浏览器不识别	改为 `UTF-8`
回调函数未定义或冲突	多个请求使用相同名字	封装自动生成函数名
无法处理失败请求	script 无 onerror 支持	使用 timeout 模拟失败处理

🔧 四、封装 JSONP 工具函数（现代化 Promise 版）

✅ 功能要点：

支持 URL 和参数拼接
自动生成唯一回调名
超时处理
自动清理 script 和回调函数
支持 Promise，可以用 .then 或 async/await

✅ 封装代码：

function jsonp(url, params = {}, timeout = 5000) {return new Promise((resolve, reject) => {const callbackName = `jsonp_cb_${Date.now()}_${Math.random().toString().slice(2)}`;params.callback = callbackName;const queryString = Object.entries(params).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');const script = document.createElement('script');script.src = `${url}?${queryString}`;script.async = true;window[callbackName] = (data) => {clearTimeout(timer);resolve(data);cleanup();};const timer = setTimeout(() => {reject(new Error('JSONP request timeout'));cleanup();}, timeout);function cleanup() {script.remove();delete window[callbackName];}document.body.appendChild(script);});
}

✅ 使用示例：

jsonp('http://example.com/api', { foo: 'bar' }).then(data => console.log('成功获取数据：', data)).catch(err => console.error('失败：', err));

🚀 五、JSONP 的优劣对比

优势	局限
兼容老浏览器、实现跨域	只能 GET 请求
使用简单	安全性差（可能被注入恶意代码）
不依赖 XMLHttpRequest	不支持 HTTP 状态码、错误处理有限

🧩 六、扩展方向（可选封装能力）

支持取消请求（Abort）
支持 callback 参数名自定义（如 cb、func）
支持多个 JSONP 同时请求（自动管理全局空间）

【前端】【业务逻辑】【面试】JSONP处理跨域原理与封装

🧠 一、JSONP 是什么？ 项目内容📌 全称JSON with Padding📍 用途跨域请求数据的一种方式，绕过同源策略📦 本质通过 <script> 标签加载远程 JS 文件，这个文件执行一个回调函数并传入数据 …...

编程日记 2025/7/18 2:30:24

深入探索RAG：用LlamaIndex为大语言模型扩展知识，实现智能检索增强生成

大型语言模型（LLM），如ChatGPT和Llama，在回答问题方面表现出色，但它们的知识仅限于训练时所获取的信息。它们无法访问私有数据，也无法在训练截止日期之后学习新知识。那么，核心问题就是……我们如…...

编程日记 2025/7/18 2:26:05

移远通信智能模组助力东成“无边界智能割草机器人“闪耀欧美市场

2025年4月21日，移远通信宣布，旗下SC206E-EM智能模组已成功应用于江苏东成电动工具有限公司旗下的DCK TERRAINA无边界智能割草机器人。这款智能模组高度集成计算、通信、定位等多元能力，以小型化、低功耗、实时性强和低成本等综合优势&#…...

编程日记 2025/7/18 2:21:04

测试-时间规模化定律可以改进世界基础模型吗？

25年3月来自 UT Austin、UW Madison 和 Nvidia 的论文“Can Test-Time Scaling Improve World Foundation Model?”。世界基础模型（WFM）通过根据当前的观察和输入预测未来状态来模拟物理世界，已成为许多物理智能（PI&#xff09…...

编程日记 2025/6/29 11:10:30

VMwaer虚拟机复制粘贴、ROS系统安装

一、VMwaer虚拟机复制粘贴设置：设置完记得重启VMwaer 1.首先确定虚拟机设置-->选项-->客户机隔离-->勾选启用拖放启用复制粘贴 2.如果还是不能粘贴可能是没有 VMware Tools 可参考怎么在linux安装vmware tools-CSDN博客设置完记得重启VMwaer。…...

编程日记 2025/7/18 1:29:53

安装 vmtools

第2章安装 vmtools 1.安装 vmtools 的准备工作 1）现在查看是否安装了 gcc 查看是否安装gcc 打开终端输入 gcc - v 安装 gcc 链接：https://blog.csdn.net/qq_45316173/article/details/122018354?ops_request_misc&request_id&biz_id10…...

编程日记 2025/7/16 13:33:24

HCIP(综合实验2)

1.实验拓补图 2.实验要求 1.根据提供材料划分VLAN以及IP地址，PC1/PC2属于生产一部员工划分VLAN10,PC3属于生产二部划分VLAN20 2.HJ-1HJ-2交换机需要配置链路聚合以保证业务数据访问的高带宽需求 3.VLAN的放通遵循最小VLAN透传原则 4.配置MSTP生成树解决二层环路问题…...

编程日记 2025/6/29 10:24:53

机器学习第一篇线性回归

数据集：公开的World Happiness Report | Kaggle中的happiness dataset2017. 目标：基于GDP值预测幸福指数。（单特征预测） 代码： 文件一：prepare_for_traning.py """用于科学计算的一个库…...

编程日记 2025/7/17 1:38:01

Spark-Streaming简介及核心编程

一、核心概念： 1.Spark-Streaming 是流式数据处理框架，基于 **DStream（离散化流）** 抽象，将实时数据划分为多个时间区间的 RDD 序列。 DStream 本质是RDD 序列，每个时间区间数据对应一个 RDD。 2.特点&a…...

编程日记 2025/7/15 18:12:36

优化提示词方面可以使用的数学方法理论:信息熵,概率论，最优化理论

优化提示词方面可以使用的数学方法理论:信息熵,概率论，最优化理论目录优化提示词方面可以使用的数学方法理论:信息熵,概率论，最优化理论信息论信息熵明确问题主题提供具体细节限定回答方向规范语言表达概率论最优化理论信息论原理：信息论中的熵可以衡量信息的不确定性。…...

编程日记 2025/7/17 1:38:17

Sqlserver安全篇之_Sqlcmd命令使用windows域账号认证sqlserver遇到问题如何处理的案例

sqlcmd https://learn.microsoft.com/zh-cn/sql/tools/sqlcmd/sqlcmd-connect-database-engine?viewsql-server-ver16 sqlcmd -S指定的数据库连接字符串必须有对应的有效的SPN信息，否则会报错SSPI Provider: Server not found in Kerberos database. 正常连接 1、…...

编程日记 2025/7/12 10:59:27

基于华为云 ModelArts 的在线服务应用开发（Requests 模块）

基于华为云 ModelArts 的在线服务应用开发（Requests 模块） 一、本节目标了解并掌握 Requests 模块的特点与用法学会通过 PythonRequests 访问华为云 ModelArts 在线推理服务熟悉 JSON 模块在 Python 中的数据序列化与反序列化掌握 Python 文件 I/O 的基…...

编程日记 2025/6/29 11:50:39

Graph Database Self-Managed Neo4j 知识图谱存储实践1：安装和基础知识学习

Neo4j 是一个原生图数据库，这意味着它在存储层实现了真正的图模型。它不是在其他技术之上使用“图抽象”，而是以您在白板上绘制想法的相同方式在Neo4j中存储数据。自2007年以来，Neo4j已经发展成为一个丰富的工具、应用程序和库的生态系统。…...

编程日记 2025/7/16 15:56:27

【Python进阶】VSCode Python开发完全指南：从环境配置到高效调试

目录前言技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比二、实战演示环境配置要求核心代码实现案例1：配置虚拟环境案例2：智能代码补全案例3：调试配置运行结果…...

编程日记 2025/7/12 8:18:48

vscode：Live Server Preview插件

这个插件不用另外打开浏览器；它是直接在Vscode里面预览html的，并且是自动实时更新的，不用不停地CtrlS保存查看使用方法：F1 -> 弹出一个窗口输入live，选择即可。运行结果如下：...

编程日记 2025/7/13 18:40:58

关于在Springboot中设置时间格式问题

目录 1-设置全局时间格式1.Date类型的时间2.JDK8时间3.使Date类和JDK8时间类统统格式化时间 2-关于DateTimeFormat注解 1-设置全局时间格式 1.Date类型的时间对于老项目来说，springboot中许多类使用的是Date类型的时间，没有用到LocalDateTime等JDK8时…...

编程日记 2025/7/16 16:41:30

双周报Vol.70: 运算符重载语义变化、String API 改动、IDE Markdown 格式支持优化...多项更新升级！

2025-04-21 语言更新 async 函数的调用处语法改为和 error 相同的 f!(..)，原语法 f!!(..) 将触发警告运算符重载的语义从基于方法迁移到了基于 trait，以后重载运算符需要通过给 moonbitlang/core/builtin 中对应的 trait 添加 impl 的形式。各个运算符…...

编程日记 2025/7/13 21:34:51

AI 技术发展：从起源到未来的深度剖析

一、AI 的起源与早期发展人工智能（AI）作为计算机科学的重要分支，其诞生可以追溯到 20 世纪中叶。1943 年，艾伦・图灵提出图灵机的概念，为计算机科学和 AI 理论奠定了基础。1950 年，图灵又提出著名的图灵…...

编程日记 2025/7/13 13:27:50

【前端】【业务逻辑】数据大屏自适应方案汇总

前端数据大屏自适应设计方案全解析在前端数据大屏的开发中，自适应设计是关键环节，它能确保大屏在不同设备和屏幕尺寸上都能呈现出良好的视觉效果和交互体验。除了常见的 transform: scale、rem/vw、Flex/Grid 等方案外，还有其他有效的方法可…...

编程日记 2025/7/16 19:12:01

Java基础复习（JavaSE进阶）第六章 IO流体系

6-1 File类 01 122、File、IO流概述 02 123、File类：对象的创建 03 124、File类：判断、判断信息相关的方法 04 125、File类：创建、删除文件的方法 05 126、File类：遍历文件夹的方法 6-2 前置知识 01 127、前置知识：方…...

编程日记 2025/7/12 13:21:01

kvm下的ceph主机启动io请求统计

背景假如一个主机存储在ceph里面，我们想统计下一次启动过程中的io读取的情况，那么可以通过下面的方法来统计启动时间也可以通过在宿主机里面去查看，通过日志这边要方便一点，无需登录到虚拟机内部日志开启 [global] fsid 406…...

编程日记 2025/6/29 9:33:20

go-Casbin使用

本次测试代码是基于单租户的RBAC鉴权依赖 github.com/casbin/casbin/v2 github.com/casbin/gorm-adapter/v2文件存储规则文件 model.pml [request_definition] r sub, obj, act[policy_definition] p sub, obj, act[role_definition] g _, _ # 用户,角色[polic…...

编程日记 2025/7/17 22:18:10

基于YOLOv11的106种手语识别分析系统

基于YOLOv11的手语识别分析系统【包含内容】【一】项目提供完整源代码及详细注释【二】系统设计思路与实现说明【三】多平台适配优化，支持Windows、macOS和Linux系统，确保中文字体正常渲染【四】识别的类别数量：106种，具体类…...

编程日记 2025/7/13 12:53:57

CentOS创建swap内存

服务器版本为CentOS7 一、检查现有 swap 空间 sudo swapon --show如果系统中没有 swap 空间或者现有的 swap 空间不足，可以继续后续步骤来创建 swap 空间。二、创建 swap 文件（推荐 2GB 作为示例） sudo dd if/dev/zero of/swapfile bs1M …...

编程日记 2025/7/13 21:50:58

OpenHarmony OS 5.0与Android 13显示框架对比

1. 架构概述 1.1 OpenHarmony OS 5.0架构 OpenHarmony OS 5.0采用分层架构设计，图形显示系统从底层到顶层包括： 应用层：ArkUI应用和第三方应用框架层：ArkUI框架、窗口管理API系统服务层：图形合成服务、窗口管理服务…...

编程日记 2025/7/16 22:19:03

详解Node.js中的setImmediate()函数

setImmediate() 是 Node.js 提供的一个定时器函数，用于在事件循环的 “Check” 阶段执行回调函数。它与 setTimeout() 相似，但两者有着显著的区别，主要体现在回调函数的执行时机上。什么是事件循环（Event Loop） 在…...

编程日记 2025/7/12 15:46:22

使用C#写的HTTPS简易服务器

由于监控网络之用，需要写一个https服务器。由于用到https，因此还需一个域名证书，可以免费申请，也可以用一个现有的。接下来还需在Windows上安装证书，注册证书。安装证书找到证书，点击，一路…...

编程日记 2025/7/18 1:29:38

C# 事件知识文档

C# 事件知识文档概述在 C# 中，事件（Event）是一种特殊的机制，它基于委托实现，用于支持发布-订阅模式。事件允许对象在发生特定操作时通知其他对象，而无需直接引用这些对象。这种机制非常适合于实现诸如用户界面交互、状态变化通知等场景。核心概念发布者（Publishe…...

编程日记 2025/7/12 12:50:07

C++进阶--二叉搜索树

文章目录 C进阶--二叉搜索树概念算法复杂度模拟实现结构定义插入查找删除剩余的次要接口中序遍历： 构造，析构，拷贝构造，赋值重载结语很高兴和大家见面，给生活加点impetus！！开启今天的编程之路…...

编程日记 2025/7/12 7:06:03

互联网大厂Java面试：从基础到进阶的技术点探讨

场景：赵大宝的面试旅程在互联网大厂的面试现场，严肃的面试官李老师正在准备对求职者赵大宝进行一场Java技术栈的深度考核。赵大宝是一位以幽默著称的程序员，面试官希望通过这次面试能全面了解他的技术能力。第一轮提问李老师&#xff1…...

编程日记 2025/7/17 14:07:55

【MCP Node.js SDK 全栈进阶指南】中级篇（1）：MCP动态服务器高级应用

前言在初级篇中，我们已经掌握了MCP TypeScript-SDK的基础知识，包括开发环境搭建、基础服务器开发、资源开发、工具开发、提示模板开发以及传输层配置等核心内容。随着我们对MCP的理解不断深入，是时候进入更高级的应用场景了。 MCP的一个强大特性是其动态性，能够在运行时…...

编程日记 2025/7/17 8:51:20

LM35 温度传感器介绍

【本文基于Arduino项目】 1. LM35 温度传感器简介 LM35 是一款精密模拟温度传感器，由德州仪器（TI）推出，具有线性输出、无需校准、低功耗等特点，广泛应用于环境监测、工业控制等领域。主要特性参数规格测量范围-…...

编程日记 2025/6/29 9:34:41

【网络应用程序设计】实验一：本地机上的聊天室

个人博客：https://alive0103.github.io/ 代码在GitHub：https://github.com/Alive0103/XDU-CS-lab 能点个Star就更好了，欢迎来逛逛哇~❣ 主播写的刚够满足基本功能，多有不足，仅供参考，还请提PR指正&#xff…...

编程日记 2025/7/16 19:28:35

Cursor 设置规则

文章目录 1、一个可以参考的网站-各种语言都有2、正向设置规则通过符号还可以引用子规则 3、逆向设置规则 1、一个可以参考的网站-各种语言都有 https://cursor.directory/rules 2、正向设置规则注意，最开始规则设置已经作废（下图下面的红框&#…...

编程日记 2025/7/14 13:28:04

人工智能-模型评价与优化(过拟合与欠拟合，数据分离与混淆矩阵，模型优化，实战)

欠拟合与过拟合模型不合适，导致其无法与数据实现有效预测欠拟合可以通过观察训练数据及时发现，通过优化模型结果解决过拟合的原因： 1、模型结构过于复杂（维度太高） 2、使用了过多属性，模型训练时包含了…...

编程日记 2025/6/29 9:33:37

Python爬虫从入门到实战详细版教程

Python爬虫从入门到实战详细版教程文章目录 Python爬虫从入门到实战详细版教程书籍大纲与内容概览第一部分：爬虫基础与核心技术1. 第1章：[爬虫概述](https://blog.csdn.net/qq_37360300/article/details/147431708?spm=1001.2014.3001.5501)2. 第2章：HTTP协议与Requests库…...

编程日记 2025/7/14 14:35:03

Java多线程编程初阶指南

目录一.线程基础概念线程是什么？ 线程与进程对比为啥要有线程二.线程实现方式继承Thread类实现Runnable接口常规实现方式匿名内部类写法 Lambda表达式写法（Java8） 对比总结三.Thread 类及常见方法核心功能核心构造方…...

编程日记 2025/7/10 12:05:16

Qt信号槽连接的三种方法对比

信号槽连接方法对比 1. 直接连接2. 集中管理3.函数指针初始化列表后期需要disconnect 对比 1. 直接连接 connect(codeWindow, &CodeEditorWindow::SetBaseLineSignal, monitoringWindow, &MonitoringWindow::SetBaseLineSlot),connect(&ButtonTree::Instance(), &a…...

编程日记 2025/6/29 12:25:18

健康生活新指南

在 “朋克养生” 与 “躺平焦虑” 并存的时代，真正的健康生活无需刻意 “内卷”。这几个简单又实用的养生妙招，能让你在忙碌日常中悄悄升级健康状态，轻松拥抱活力人生。一、饮食：吃对食物，给身体 “加 Buff” 别…...

编程日记 2025/7/14 23:50:52

IF=24.5 靶向MMP9治疗协同提高抗PD1疗效

Targeted MMP9 therapy synergistically improves anti-PD1 efficacy CTNNB1GOF（The gain of function (GOF) CTNNB1 mutations，功能获得型CTNNB1突变）在肝细胞癌（HCC）中，已被证明与免疫排斥相关&#xff0…...

编程日记 2025/6/29 9:34:33

基于SpringBoot的中华诗词文化分享平台-项目分享

基于SpringBoot的中华诗词文化分享平台-项目分享项目介绍项目摘要管理员功能图会员功能图系统功能图项目预览会员主页面诗词页面发布问题回复评论最后项目介绍使用者：管理员、会员开发技术：MySQLJavaSpringBootVue 项目摘要本文旨在设计与实现一…...

编程日记 2025/6/29 9:33:26

SQLiteDatabase 增删改查(CRUD)详细操作

文章目录 1. 初始化数据库2. 插入数据 (Create)方法一：使用 ContentValues insert()方法二：直接执行SQL 3. 查询数据 (Read)方法一：使用 query() 方法方法二：使用 rawQuery() 执行原始SQL 4. 更新数据 (Update)方法一&#xff1a…...

编程日记 2025/7/17 19:59:41

从 0 到 1 打通 AI 工作流：Dify+Zapier 实现工具自动化调用实战

一、引言：当 AI 遇到工具孤岛在企业数字化转型的浪潮中，AI 工具的应用早已从单一的对话交互进阶到复杂的业务流程自动化。但开发者常常面临这样的困境：本地开发的 MCP 工具（如 ERP 数据清洗脚本、CRM 工单系统 API）如…...

编程日记 2025/7/14 16:13:44

第四届商师校赛 web 1

RceMe ezGame 伪装 Ping Are you from SQNU? Look for the homepage Through 根据题目慢慢试 File_download Post上传得到下载文件反编译一下 /* * Decompiled with CFR 0.152. * * Could not load the following classes: * javax.servlet.http.HttpServlet */ …...

编程日记 2025/7/15 18:13:33