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

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

news 2025/10/27 12:34:07

前言

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/10/27 0:14:03

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/10/23 7:44:12

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/10/27 3:49:19

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/10/25 17:09:06

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/30 5:23:30

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45