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

node.js基础学习-http模块-JSONP跨域传值（四）

news 2026/2/1 21:56:25

前言

JSONP（JSON with Padding）是一种用于跨域数据传输的技术。在浏览器的同源策略限制下，一般情况下，JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用 <script> 标签的跨域特性来绕过这个限制。
它本质上是一种非官方的跨域数据交互解决方案，主要用于从不同域名的服务器获取数据，在前后端分离的开发模式以及与第三方 API 交互等场景中发挥着重要作用。

一、使用场景

  • 跨域数据获取：在前后端分离的项目中，前端应用（如运行在 http://localhost:3000）需要从后端服务器（如 http://api.example.com）获取数据时，当后端服务器没有配置 CORS（跨域资源共享），JSONP 是一种简单的跨域解决方案。
  • 与第三方 API 交互：当使用一些第三方的 API 服务，且这些服务支持 JSONP 时，也可以使用 JSONP 来获取数据。例如，一些天气 API、地图 API 等，在不支持 CORS 或者为了简单快速地获取数据时，可以考虑使用 JSONP。

二、JSONP工作原理

利用<script>标签：浏览器在加载 JavaScript 脚本时，不受同源策略的限制。JSONP 利用了这一点，在客户端通过动态创建 <script> 标签来请求服务器数据。例如，假设服务器端提供了一个接口 http://example.com/api?callback=myCallback，客户端会动态创建一个如下的 <script> 标签：

<script src="http://example.com/api?callback=myCallback"></script>

服务器响应：服务器收到请求后，会将数据包装在指定的回调函数（这里是 myCallback）中返回。例如，服务器返回的数据可能是这样的格式：myCallback({ "data": "value" })。当浏览器接收到这个响应并将其作为脚本执行时，实际上是在调用客户端预先定义好的 myCallback 函数，并将数据作为参数传入。

客户端处理：在客户端，需要预先定义好这个 myCallback 函数来接收和处理服务器返回的数据。例如：

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

客户端打印出来的data就是服务端传过来的数据

三、JSONP优点

  • 简单易用：JSONP 的实现相对简单，对于只需要获取数据的跨域场景，通过简单地创建 <script> 标签和定义回调函数就可以实现。与一些复杂的跨域解决方案（如 CORS）相比，它的代码复杂度较低。
  • 兼容性好：几乎所有的浏览器都支持通过 <script> 标签加载外部脚本，所以 JSONP 在各种浏览器环境下都能很好地工作，不需要考虑浏览器兼容性问题。

四、JSONP缺点

  • 安全风险：由于 JSONP 是通过 <script> 标签加载数据，这就意味着服务器返回的数据会被当作 JavaScript 代码来执行。如果服务器被攻击者控制，返回恶意代码，那么客户端就会执行这些恶意代码，导致安全问题，如 XSS（跨站脚本攻击）。
  • 只能用于 GET 请求：JSONP 是基于 <script> 标签的机制，而 <script> 标签只能发起 GET 请求。所以，如果需要进行 POST 等其他类型的请求，JSONP 就无法满足需求。

五、HTTP模块实现JSONP跨域传值

服务端：

当服务器接收到请求时，需要检查请求的 URL 参数，看是否包含一个用于 JSONP 的回调函数名称（通常通过类似callback的参数指定）。例如，在一个http模块创建的服务器中，可以在请求处理函数中检查：

//使用http模块创建服务器，我们建议使用commonjs模块规范，因为很多第三方的组件都使用了这种规范。当然es6写法也支持。
//http模块式Node.js内置的模块，用于创建和管理HTTP服务器。传统的HTTP服务器一般使用C语言编写，但Node.js使用JavaScript实现，因此性能更好。
const http = require('http')//url模块用于解析url参数
const url=require('url');//创建服务器，监听3000端口
http.createServer((req, res) => {//判断请求url是否为favicon.ico，如果是则返回空（这个请求是一个浏览器的默认请求，可以忽略）if (req.url === '/favicon.ico') {return}//设置响应头，状态码为200，内容类型为text/html;charset=utf-8，这种才能正常显示中文res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'})//解析url参数，这里的第二个参数为true，表示解析query字符串，返回object格式const parsedUrl = url.parse(req.url,true);console.log(parsedUrl);let {pathname,query}=parsedUrl;//callback参数中可以指定回调函数名，这里我们取名为callback（不一定要叫callback，可以随意取，但是要和客户端请求时一致）let {callback}=query;//如果有callback参数，则说明是jsonp请求，返回jsonp格式的数据if(callback){res.write(`${callback}(${JSON.stringify({name:'zhangsan',age:20})})`)}//这里必须要end，否则会出现卡死的情况res.end()
}).listen(3000, () => {console.log('Server is running on port 3000')
})

客户端：

我们创建一个index.html页面，在里面创建一个script标签，实现请求jsonp服务端接口的客户端。

index.html文件如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>jsonp接口调用测试</h1>
<script>// 创建一个script标签，设置src属性为jsonp接口地址，并设置回调函数名为jsonpCallbacklet script = document.createElement('script')script.src = 'http://localhost:3000/jsonp?callback=jsonpCallback';//添加到body中，加载这个页面的时候就会自动执行这个script标签，发起jsonp请求document.body.appendChild(script);// 定义回调函数，接收jsonp接口返回的数据（这里的回调函数名要和jsonp接口地址中的callback参数保持一致）function jsonpCallback(data) {console.log('jsonp服务端接口返回的数据：',data)}
</script>
</body>
</html>

执行启动index.html文件，就会向服务器发送请求，我们查看服务器是否通过回调（这里是jsonpCallback函数）返回数据，并打印。

从上图可以看到返回的数据成功打印，可以看到通过回调传过来的数据。

以上就是http模块实现JSONP跨域传值的实现过程。

相关文章：

node.js基础学习-http模块-JSONP跨域传值（四）

前言 JSONP&#xff08;JSON with Padding&#xff09;是一种用于跨域数据传输的技术。在浏览器的同源策略限制下&#xff0c;一般情况下&#xff0c;JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用 <script> 标签的跨域特性来绕过这个限制。 它本质上是一…...

编程日记 2024/11/29 5:59:43

Unity高效编程经验50条分享

1.避免频繁创建临时对象 错误写法&#xff1a;obj.transform.position pos;这种写法会在Lua中频繁返回transform对象导致gc正确写法&#xff1a;创建一个静态方法来设置位置&#xff0c;例如 class LuaUtil { static void SetPos(GameObject obj, float x, float y, float z)…...

编程日记 2024/11/29 5:58:40

TypeScript 泛型

在 TypeScript 中&#xff0c;泛型是一种强大的工具&#xff0c;它允许你在定义函数、类、接口或类型别名时不指定具体的类型。这意味着你可以为这些实体创建可重用的组件&#xff0c;这些组件可以在不同的类型上以一致的方式工作。今天&#xff0c;我们将深入探讨 TypeScript …...

编程日记 2024/11/29 5:57:38

【Java从入门到放弃 之 条件判断与循环】

条件判断与循环 条件判断if 语句if-else 语句if-else 嵌套语句switch 语句 循环for 循环while 循环do-while 循环break 和 continuebreak 关键字continue 关键字总结 条件判断 条件判断用于根据不同的条件执行不同的代码块。Java 中常用的条件判断语句有 if、if-else 和 switc…...

编程日记 2024/11/29 5:56:37

Ubuntu20.04安装kalibr

文章目录 环境配置安装wxPython下载编译测试报错1问题描述问题分析问题解决 参考 环境配置 Ubuntu20.04&#xff0c;python3.8.10&#xff0c;boost自带的1.71 sudo apt update sudo apt-get install python3-setuptools python3-rosinstall ipython3 libeigen3-dev libboost…...

编程日记 2024/11/29 5:54:35

Flink 任务启动脚本-V2（包括ck启动）

#!/bin/bash#crontab时设置&#xff0c;如果依赖其他环境变量配置&#xff0c;可以在脚本执行一下环境变量脚本 source /etc/profile# 进入脚本目录 curdirdirname "$0" curdircd "$curdir"; pwd echo "进入启动脚本目录 $curdir"# 定义应用程序…...

编程日记 2024/11/29 5:53:33

扫雷-完整源码(C语言实现)

云边有个稻草人-CSDN博客 在学完C语言函数之后&#xff0c;我们就有能力去实现简易版扫雷游戏了&#xff08;成就感满满&#xff09;&#xff0c;下面是扫雷游戏的源码&#xff0c;快试一试效果如何吧&#xff01; 在test.c里面进行扫雷游戏的测试&#xff0c;game.h和game.c…...

编程日记 2024/11/29 5:52:30

python -从文件夹批量提取pdf文章的第n页，并存储起来

python -从文件夹批量提取pdf文章的第n页&#xff0c;并存储起来 废话不多说&#xff0c;看下面代码 讲解一下下面代码 reader PyPDF2.PdfReader (file) 将文件转化为PdfReader 对象&#xff0c;方便使用内置方法。 first_page reader.pages[0] 提取第一页 writer PyPDF…...

编程日记 2024/11/29 5:51:22

R Excel 文件操作指南

R Excel 文件操作指南 概述 R 语言是一种强大的统计分析工具&#xff0c;广泛用于数据分析和可视化。在实际应用中&#xff0c;经常需要将 R 语言与 Excel 文件结合使用&#xff0c;以便处理和分析数据。本指南将介绍如何在 R 中读取、写入和操作 Excel 文件。 准备工作 在…...

编程日记 2024/11/29 5:49:18

RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange

前言&#xff1a; RabbitMQ 延迟队列插件&#xff08;rabbitmq_delayed_message_exchange&#xff09;是一个社区开发的插件&#xff0c;它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件&#xff0c;用户可以创建一种特殊的交换机类型 x-delayed-message&#xff0c;该…...

编程日记 2024/11/29 5:48:17

fatal error in include chain (rtthread.h):rtconfig.h file not found

项目搜索这个文件 rtconfig 找到后将其复制粘贴到 你的目录\Keil\ARM\ARMCC\include 应该还有cJSON&#xff0c;rtthread.h和 等也复制粘贴下...

编程日记 2024/11/29 5:47:15

Java 反射（Reflection）

Java 反射&#xff08;Reflection&#xff09; Java 反射&#xff08;Reflection&#xff09;是一个强大的特性&#xff0c;它允许程序在运行时查询、访问和修改类、接口、字段和方法的信息。反射提供了一种动态地操作类的能力&#xff0c;这在很多框架和库中被广泛使用&#…...

编程日记 2024/11/29 5:46:13

Python爬取机车网车型数据并存入Mysql数据库

结果展示&#xff08;文末附完整代码&#xff09;&#xff1a; 一、引言 在当今数字化时代&#xff0c;数据对于各个领域的重要性不言而喻。对于机车行业而言&#xff0c;获取丰富的机车品牌、车型及详细信息数据&#xff0c;能够为市场分析、消费者研究等提供有力支持。本文将…...

编程日记 2024/11/29 5:45:08

fpga 时序分析基础

目录 触发器的动态参数 同步时序电路分析 1. 时钟脉冲的特性 2. 同步时序电路分析 Timing Analyzer的应用 异步时序与亚稳态问题 时序分析就是对时序电路进行时序检查&#xff0c;通过分析电路中所有寄存器之间的路径延迟以检查电路的传输延迟是否会导致触发器的建立时间…...

编程日记 2024/11/29 5:44:00

python学习——二维列表的列表生成式

二维列表的列表生成式允许你生成一个列表&#xff0c;其中每个元素本身也是一个列表。这在处理矩阵或表格数据时非常有用。 以下是如何使用列表生成式来创建二维列表的示例&#xff1a; 文章目录 基本语法示例1. 创建一个 3x3 的单位矩阵2. 创建一个 4x4 的乘法表3. 创建一个 …...

编程日记 2024/11/29 5:42:58

【错误❌】——槽函数定义好但未初始化

public slots:void onClose(); 初始化即可成功&#xff1a;...

编程日记 2024/11/29 5:39:52

OpenCV相机标定与3D重建(6)将3D物体点投影到2D图像平面上函数projectPoints()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::projectPoints 是 OpenCV 库中用于鱼眼镜头模型的函数&#xff0c;它将3D物体点投影到2D图像平面上。这个函数对于模拟或者理解鱼眼…...

编程日记 2024/11/29 5:37:46

【Linux】剧幕中的灵魂更迭：探索Shell下的程序替换

&#x1f3ac; 个人主页&#xff1a;谁在夜里看海. &#x1f4d6; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 一念既出&#xff0c;万山无阻 目录 &#x1f4d6;一、进程程序替换 1.替换的演示 ❓替换与执行流 ❓程序替换≠进程替换 2.替换的原理 …...

编程日记 2024/11/29 5:35:43

38 基于单片机的宠物喂食(ESP8266、红外、电机)

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52单片机&#xff0c;采用L298N驱动连接P2.3和P2.4口进行电机驱动&#xff0c; 然后串口连接P3.0和P3.1模拟ESP8266&#xff0c; 红外传感器连接ADC0832数模转换器连接单片机的P1.0~P1.…...

编程日记 2024/11/29 5:34:42

Unity中的数学应用 之 角色移动中单位化向量的妙用 （小学难度）

最近准备从简单到困难跟几个教程用以加强自己的业务能力&#xff0c;相信很多小伙伴都做过胡闹厨房这一个案例&#xff0c;其实这个案例比较初级&#xff0c;但是也包含了很多平常可能注意不到小细节&#xff0c;所以我就以它为举例&#xff0c;拓展其中的数学知识 CodeMonkey教…...

编程日记 2024/11/29 5:33:35

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/1 9:15:13

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

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

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

编程新知 2026/1/25 20:49:59

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2026/2/1 7:05:07

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/1/25 14:15:52

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/1/18 23:42:16

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

编程新知 2026/1/20 9:46:33

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2026/1/23 0:14:48

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

编程新知 2025/9/23 9:23:07

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2026/1/22 13:36:20