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

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

news 2025/7/4 16:32: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

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/7/2 15:27:24

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/7/4 13:28:00

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/7/4 11:14:29

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/7/4 8:02:53

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/7/4 10:53:23

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/6/15 13:02:49

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/6/24 2:55:32

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/6/15 23:06:39

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2025/6/21 10:52:13

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/7/4 6:01:06