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

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

news 2025/9/11 21:48:51

前言

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/8/19 15:38:50

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/8/10 8:29:19

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/7/8 3:48:19

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/9/3 18:06:27

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2025/9/7 8:49:50

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

编程新知 2025/9/9 6:56:01

前端调试HTTP状态码

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

编程新知 2025/7/21 10:05:49

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

编程新知 2025/9/7 21:03:49