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

JSONP 实现跨域请求案例

news 2026/4/21 15:19:03

后端使用 express 搭建，案例代码如下：

const express = require('express')const app = express()
const PORT = 3000app.get('/data', (req, res) => {const jsonData = {name: 'Alan',age: 666,city: 'GD'}const callback = req.query.callback // 获取前端中的回调函数名称if (callback) {res.send(`${callback}(${JSON.stringify(jsonData)})`)} else {res.status(400).send('Callback function name is required')}
})app.listen(PORT, () => { console.log(`listen http://localhost:${PORT}`) })

前端发起 JSONP 请求，实现跨域数据请求

<body><pre></pre><script>// 定义一个回调函数来处理 JSONP 响应function handleJsonpData(data) {// 输出 JSONP 数据document.querySelector('pre').innerText = JSON.stringify(data, null, 4)}// 创建一个 script 标签，设置 src 属性为 JSONP 请求的 URL，并指定回调函数名const script = document.createElement('script')script.src = 'http://localhost:3000/data?callback=handleJsonpData'// 将 script 标签添加到文档中，触发 JSONP 请求，// 然后服务器放回的字符串会被当成 js 命令执行,从而调用我们前面定义的函数// 这样就可以获取到服务器的数据了document.body.appendChild(script)</script>
</body></html>

效果

在这里插入图片描述
在这里插入图片描述

相关文章：

JSONP 实现跨域请求案例

后端使用 express 搭建&#xff0c;案例代码如下&#xff1a; const express require(express)const app express() const PORT 3000app.get(/data, (req, res) > {const jsonData {name: Alan,age: 666,city: GD}const callback req.query.callback // 获取前端中的回…...

编程日记 2024/3/20 7:29:52

2024年智慧城市、人文发展与区域经济国际会议（ICSCCDRE 2024）

2024年智慧城市、人文发展与区域经济国际会议&#xff08;ICSCCDRE 2024&#xff09; 2024 International Conference on Smart Cities, Cultural Development and Regional Economy 会议简介&#xff1a; 城市经济人文发展是一个综合性的过程&#xff0c;它关注城市在经济、…...

编程日记 2024/3/20 7:26:50

目标检测——PP-YOLO算法解读

PP-YOLO系列&#xff0c;均是基于百度自研PaddlePaddle深度学习框架发布的算法&#xff0c;2020年基于YOLOv3改进发布PP-YOLO&#xff0c;2021年发布PP-YOLOv2和移动端检测算法PP-PicoDet&#xff0c;2022年发布PP-YOLOE和PP-YOLOE-R。由于均是一个系列&#xff0c;所以放一起解…...

编程日记 2024/3/20 7:25:48

多特征变量序列预测(11) 基于Pytorch的TCN-GRU预测模型

往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 风速预测&#xff08;一&#xff09;数据集介绍和预处理-CSDN博客 风速预测&#xff08;二&#xff09;基于Pytorch的EMD-LSTM模型-CSDN博客 风速预测&#xff…...

编程日记 2024/3/20 7:23:47

Lvs+keepalived+nginx搭建高可用负载均衡集群

环境配置 master主机192.168.199.149&#xff0c;虚拟IP192.168.199.148 back备机192.168.199.150 真实服务器1 192.168.199.155 真实服务器2 192.168.199.156 关闭防火墙和selinux master配置&#xff08;149&#xff09; 添加虚拟IP ip addr add 192.168.199.148/24 …...

编程日记 2024/3/20 7:21:45

WPF —— 控件模版和数据模版

1:控件模版简介: 自定义控件模版&#xff1a;自己添加的样式、标签&#xff0c;控件模版也是属于资源的一种&#xff0c; 每一个控件模版都有一唯一的 key&#xff0c;在控件上通过template属性进行绑定 什么场景下使用自定义控件模版&#xff0c;当项目里面多个地方…...

编程日记 2024/3/20 7:14:38

如何动态修改spring中定时任务的调度策略(1)

在我们日常开发中经常会调度工具来处理一下需要定时执行的任务&#xff0c;比如定时导出报表数据给业务方发送邮件。你在工作中是如何这种定时调度&#xff1f; 如何实现调度任务 使用java技术栈的老铁来说&#xff0c;现成定时调度的解决方案应该有很多&#xff0c;总结来说…...

编程日记 2024/3/20 7:13:37

idea import的maven类报红

idea 报红/显示红色的原因 一般报红&#xff0c;显示红色&#xff0c;是因为 idea 在此路径下&#xff0c;找不到这个类。 找到是哪个 jar 包的类导致 idea 报红 点击报红的路径的上一层&#xff0c;进入jar 包。比如&#xff1a; import com.aaa.bbb.ccc.DddDto;这个 impo…...

编程日记 2024/3/20 7:12:36

React——class组件中setState修改state

class组件中通过state去存储当前组件的数据&#xff0c;那怎么对其进行修改呢&#xff1f;就是方法this.setState({ 要修改的部分数据 }) setState() 作用&#xff1a;1 、修改 state 内容&#xff1b;2 、更新 UI 特别注意&#xff1a;react的核心其实是虚拟dom&#xff08;数…...

编程日记 2024/3/20 7:11:35

搭建基于 Snowflake 的 CI/CD 最佳实践！

Snowflake 提供了可扩展的计算和存储资源&#xff0c;和基于 SQL 的界面 Snowsight&#xff0c;方便用户进行数据操作和分析。然而&#xff0c;如果用户想将自己的 CI/CD 流程与 Snowflake 集成时&#xff0c;会发现一些不便之处&#xff08;尤其相比其 SnowSight 优秀的查询能…...

编程日记 2024/3/20 7:10:34

数据结构(五)——树的基本概念

五、树 5.1 树的基本概念 5.1.1 树的定义 树是n(n>0)个结点的有限集合&#xff0c;结点数为0的树称为空树 非空树的特性 有且仅有一个根节点没有后继的结点称为“叶子结点”&#xff08;或终端结点&#xff09;有后继的结点称为“分支结点”&#xff08;或非终端结点&a…...

编程日记 2024/3/20 7:09:33

2.28CACHE，虚拟存储器

主存储器,简称主存。CPU可以直接随机地对其进行访问&#xff0c;也可以和高速缓存器及辅助存储器交换数据。 2> 辅助存储器,简称辅存&#xff0c;不能与CPU直接相连&#xff0c;用来存放当前暂时不用的程序和数据 3> 高速缓冲存储器,位于主存和CPU之间&#xff0c;用来…...

编程日记 2024/3/20 7:04:23

深入理解栈和队列（一）：栈

个人主页&#xff1a;17_Kevin-CSDN博客 专栏&#xff1a;《数据结构》 一、栈的概念 栈&#xff08;Stack&#xff09;是一种特殊的线性表&#xff0c;它遵循后进先出&#xff08;Last-In-First-Out&#xff0c;LIFO&#xff09;的原则。栈可以被看作是一个只能在一端进行操作…...

编程日记 2024/3/20 6:55:16

electron-builder 打包问题，下载慢解决方案

目录 问题说明设置下载源 &#xff1f;解决方案思路下载Electron下载winCodeSign下载nsis下载nsis-resources 总结 问题说明 项目使用了Electron&#xff0c;在第一次打包时会遇见下载慢&#xff0c;导致打包进度几乎停滞不前&#xff0c;甚至可能直接报错 其实这是因为Electr…...

编程日记 2024/3/20 6:53:14

（简单成功）Mac：命令设置别名

案例&#xff1a;给"ls -l"命令&#xff0c;设置别名通过”ll“快速访问 1、在项目根目录底下查看有无.bash_profile文件&#xff0c;注意这个是个隐藏文件&#xff0c;需要使用ls -a命令查看&#xff1a; 没有.bash_profile新建一个文件&#xff0c; 在最后添加一行…...

编程日记 2024/3/20 6:52:13

Grok-1：参数量最大的开源大语言模型

Grok-1&#xff1a;参数量最大的开源大语言模型 项目简介 由马斯克领衔的大型模型企业 xAI 正式公布了一项重要动作&#xff1a;开源了一个拥有 3140 亿参数的混合专家模型&#xff08;MoE&#xff09;「Grok-1」&#xff0c;连同其模型权重和网络架构一并公开。 此举将 Gro…...

编程日记 2024/3/20 6:47:08

Python 自然语言处理库之stanza使用详解

概要 在自然语言处理（NLP）领域，Python Stanza 库是一个备受推崇的工具，它提供了强大的功能和易用的接口，帮助开发者处理文本数据、进行语言分析和构建NLP应用。本文将深入探讨 Stanza 库的特性、用法，并通过丰富的示例代码展示其在实际项目中的应用。 Stanza 简介 Stan…...

编程日记 2024/3/20 6:45:06

计算机网络：数据交换方式

计算机网络&#xff1a;数据交换方式 电路交换分组交换报文交换传输对比 本博客介绍计算机之间数据交换的三种方式&#xff0c;分别是电路交换、分组交换以及报文交换。 电路交换 我们首先来看电路交换&#xff0c;在电话问世后不久&#xff0c;人们就发现要让所有的电话机都…...

编程日记 2024/3/20 6:44:05

万用表革新升级，WT588F02BP-14S语音芯片助力智能测量新体验v

万能表功能&#xff1a; 万能表是一款集多功能于一体的电子测量工具&#xff0c;能够精准测量电压、电流、电阻等参数&#xff0c;广泛应用于电气、电子、通信等领域。其操作简便、测量准确&#xff0c;是工程师们进行电路调试、故障排查的得力助手&#xff0c;为提升工作效率…...

编程日记 2024/3/20 6:43:04

Day61：WEB攻防-PHP反序列化原生类TIPSCVE绕过漏洞属性类型特征

知识点&#xff1a; 1、PHP-反序列化-属性类型&显示特征 2、PHP-反序列化-CVE绕过&字符串逃逸 3、PHP-反序列化-原生类生成&利用&配合 补充&#xff1a;如果在 PHP 类中没有实现某个魔术方法&#xff0c;那么该魔术方法在相应的情况下不会被自动触发。PHP 的魔…...

编程日记 2024/3/20 6:42:03

排查STM32 SPI无时钟信号：从CubeMX配置到示波器测量的完整Debug流程

STM32 SPI时钟信号消失&#xff1f;从CubeMX配置到硬件测量的全链路诊断手册 深夜的实验室里&#xff0c;示波器屏幕上那条本该跳动的SPI时钟信号线依然平静如死水。作为嵌入式开发者&#xff0c;这种场景再熟悉不过——明明CubeMX配置看起来一切正常&#xff0c;代码也顺利编译…...

编程新知 2026/4/21 15:03:38

KNN、K-Means算法调参实战：如何用闵可夫斯基距离的p值提升模型效果？

KNN与K-Means算法调优&#xff1a;闵可夫斯基距离p值的实战艺术 距离度量是机器学习算法的隐形骨架&#xff0c;它决定了模型如何"看待"数据之间的关系。在K近邻&#xff08;KNN&#xff09;和K-Means这类基于距离的算法中&#xff0c;选择恰当的距离度量往往比调整其…...

编程新知 2026/4/21 14:53:33

NVIDIA Profile Inspector深度解析：如何解锁显卡隐藏性能的7个关键技术

NVIDIA Profile Inspector深度解析&#xff1a;如何解锁显卡隐藏性能的7个关键技术 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 当你面对游戏帧率波动、画面撕裂或显卡性能未充分发挥时&#xff0c;…...

编程新知 2026/4/21 13:24:18

别急着渲染！用Assimp命令行模式快速预览3D模型数据，排查导入问题

3D模型调试新思路&#xff1a;用Assimp命令行工具快速定位数据问题 在3D开发流程中&#xff0c;模型导入环节往往隐藏着各种"暗坑"——材质丢失、骨骼错位、动画异常等问题常常要到渲染阶段才会暴露。传统调试方式需要反复修改代码、重新编译、查看渲染结果&#xff…...

编程新知 2026/4/21 13:04:39

如何用DDrawCompat让Windows 10/11完美运行经典老游戏：终极兼容性修复指南

如何用DDrawCompat让Windows 10/11完美运行经典老游戏&#xff1a;终极兼容性修复指南 【免费下载链接】DDrawCompat DirectDraw and Direct3D 1-7 compatibility, performance and visual enhancements for Windows Vista, 7, 8, 10 and 11 项目地址: https://gitcode.com/g…...

编程新知 2026/4/21 12:53:15

2025届学术党必备的AI辅助论文方案推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 用于降低文本重复率的在线服务平台&#xff0c;是降重网站之所为&#xff0c;其主要服务的领…...

编程新知 2026/4/21 11:47:19

AI编程革命：Codex自动写脚本实战指南

告别重复造轮子&#xff1a;Codex写脚本的技术文章大纲理解Codex的基本能力Codex是基于GPT-3的AI模型&#xff0c;能够将自然语言转换为代码。 支持多种编程语言&#xff0c;包括Python、JavaScript、Go等。 适用于自动化脚本、数据处理、API调用等场景。识别适合自动化的重复任…...

编程新知 2026/4/21 10:50:37

1个终极网盘直链解析解决方案：如何摆脱下载限速实现全速下载？

1个终极网盘直链解析解决方案&#xff1a;如何摆脱下载限速实现全速下载&#xff1f; 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中…...

编程新知 2026/4/21 10:42:24

从不起振到波形完美：一次搞定无源晶振电路设计的那些坑（实测负阻/ESR/驱动电平）

从不起振到波形完美&#xff1a;无源晶振电路设计全流程实战指南 当一块新设计的电路板在首次上电时&#xff0c;晶振电路毫无反应&#xff0c;示波器上只有一片死寂的直线&#xff0c;这种场景对硬件工程师来说再熟悉不过。无源晶振电路看似简单——一个晶体加两个电容&#x…...

编程新知 2026/4/21 10:05:26

FUXA工业可视化平台架构解析：7天构建企业级SCADA系统

FUXA工业可视化平台架构解析&#xff1a;7天构建企业级SCADA系统 【免费下载链接】FUXA Web-based Process Visualization (SCADA/HMI/Dashboard) software 项目地址: https://gitcode.com/gh_mirrors/fu/FUXA 在工业自动化数字化转型浪潮中&#xff0c;企业面临传统SCA…...

编程新知 2026/4/21 9:54:54