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

浏览器前端向后端提供服务

news 2025/12/27 2:43:20

WEB后端向浏览器前端提供服务是最常见的场景，前端向后端的接口发起GET或者POST请求，后端收到请求后执行服务器端任务进行处理，完成后向前端发送响应。
那浏览器前端向后端提供服务是什么鬼？
说来话长，长话短说。我在人脸识别场景用了开源的face-api.js。它其实有浏览器端的完整模块，但是我觉得人脸识别在实际场景中应用，全部在前端做识别不太安全，因为浏览器侧未必完全安全可控，可以考虑人脸登记注册时前端将照片和用户绑定信息发到后端，后端识别出描述信息保存，识别阶段，浏览器调用摄像头识别出人脸描述信息，发往后端，在后端进行匹配验证，这样会更安全可靠一些。但是出现了一个状况，后端依赖库中有部分依赖不翻墙是下不下来。。。于是我想了一个变通的办法，人脸匹配在一个“可信前端”上执行，后端向它传输必要数据，它执行匹配判断，然后向后端传回匹配结果。思路有了，那怎么实现呢？
解决方案就是websocket，它支持双向通信。服务器上启动websocket server后，可信客户端上浏览器访问建立websocket连接，可以通过网络访问权限和服务器对请求源IP的识别来限制仅该浏览器端可以与服务器建立websocket连接。websocket的请求响应机制跟http的请求响应机制略有不同，将用户请求的响应放在websocket的消息接收处理中了。
简单示例如下：

const express = require('express');
const app = express();
var wsServer = require('express-ws')(app)
const stringRandom = require("string-random");var ress=[];app.use('/', express.static('./'));app.ws('/ws', (ws,req)=>{console.log(req.ip);ws.send(JSON.stringify({"msg":"websocket connected!"}));ws.on('message', msg => {jmsg=JSON.parse(msg);if (jmsg.type=="answer") {let res1=ress.find(item=>(item.ref==jmsg.res))res1["res"].json(JSON.stringify({"code":200,"msg":jmsg.msg}));}else console.log(msg);})
});app.post('/inq', express.json(),(req, res) => {const question = req.body.question;let refcode=stringRandom(32, { letters: 'ABCDEF' });ress.push({"ref":refcode,"res":res});Array.from(wsServer.getWss().clients)[0].send(JSON.stringify({"type":"ask","msg":question,"res":refcode}));
});app.listen(3000, () => { console.log(`express后端查询websocket demo启动`); })

浏览器地址栏输入http://localhost:3000/trust.html

<!DOCTYPE html>
<html>
<head>
<title>websocket前端充当查询服务器</title>
<meta charset="utf-8">
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<script>var ws = new WebSocket("http://localhost:3000/ws");ws.onmessage = event => {let jvar=JSON.parse(event.data);console.log(`收到查询: ${jvar.msg}`) if (jvar.type=="ask") {ws.send(JSON.stringify({"type":"answer","res":jvar.res,"msg":"yes"}))}
}
</script>
</body>
</html>

Postwoman里POST请求http://localhost:3000/inq
在这里插入图片描述

该例子简单，html的js里处理消息type为"ask"的段内增加些代码就可满足更复杂的计算逻辑处理了，比如上面提到的人脸匹配，消息传入里question可以是一个object，比如包含待识别的人脸描述符，和已注册的人脸描述特征等。
这种变通的前后端模式既规避了纯前端方案的安全问题，又绕开了后端依赖模块缺失的问题，虽然比较另类，但是能解决问题就好。

相关文章：

浏览器前端向后端提供服务

WEB后端向浏览器前端提供服务是最常见的场景&#xff0c;前端向后端的接口发起GET或者POST请求&#xff0c;后端收到请求后执行服务器端任务进行处理&#xff0c;完成后向前端发送响应。 那浏览器前端向后端提供服务是什么鬼&#xff1f; 说来话长&#xff0c;长话短说。我在人…...

编程日记 2024/10/8 5:47:54

文本到语音或视频的构想

₦X8s43Y1iIquVAeF₦ 在Python中&#xff0c;有几个库和模块可以用来实现文本到语音的转换&#xff0c;并且可以生成带有背景音乐的视频。以下是一些可用的库&#xff1a; 1. pyttsx3&#xff1a;这是一个离线文本到语音转换库&#xff0c;它支持多种语音引擎&#xff0c;不依…...

编程日记 2024/10/8 5:45:52

请解释一下数据库的分区和分片？请解释一下数据库的日志和日志的重要性？

请解释一下数据库的分区和分片&#xff1f; 数据库的分区和分片是两种用于提高数据库性能和可扩展性的技术&#xff0c;它们各自具有不同的特点和应用场景。以下是对这两种技术的详细解释&#xff1a; 一、数据库分区 定义&#xff1a; 数据库分区是将一个大型的数据库表或索…...

编程日记 2024/10/8 5:41:48

windows C++-创建数据流代理(二)

完整的数据流演示 下图显示了 dataflow_agent 类的完整数据流网络&#xff1a; 由于 run 方法是在一个单独的线程上调用的&#xff0c;因此在完全连接网络之前&#xff0c;其他线程可以将消息发送到网络。 _source 数据成员是一个 unbounded_buffer 对象&#xff0c;用于缓冲…...

编程日记 2024/10/8 5:40:47

大数据毕业设计选题推荐-个性化图书推荐系统-Python数据可视化-Hive-Hadoop-Spark

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、PHP、.NET、Node.js、GO、微信小程序、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇…...

编程日记 2024/10/8 5:37:44

【Redis入门到精通九】Redis中的主从复制

目录 主从复制 1.配置主从复制 2.主从复制中的拓扑结构 3.主从复制原理 4.主从复制总结 主从复制 在分布式系统中为了解决单点问题&#xff0c;通常会把数据复制多个副本部署到其他服务器&#xff0c;满⾜故障恢复和负载均衡等需求。Redis 也是如此&#xff0c;它为我们提…...

编程日记 2024/10/8 5:33:40

系统架构设计师论文《论企业应用系统的数据持久层架构设计》精选试读

论文真题 数据持久层&#xff08;Data Persistence Layer&#xff09;通常位于企业应用系统的业务逻辑层和数据源层之间&#xff0c;为整个项目提供一个高层、统一、安全、并发的数据持久机制&#xff0c;完成对各种数据进行持久化的编程工作&#xff0c;并为系统业务逻辑层提…...

编程日记 2024/10/8 5:32:39

策略模式和模板模式的区别

目录 一、实现方式 策略模式 模板模式 二、使用场景 三、优点 四、举例 一、实现方式 策略模式 定义策略接口 Strategy创建具体策略类 OperationAdd、OperationSubtract、OperationMultiply创建一个上下文类 Context&#xff0c;包含一个策略对象的引用&#xff0c;并通…...

编程日记 2024/10/8 5:28:34

【ubuntu】ubuntu20.04安装conda

1.下载 安装参考&#xff1a;https://blog.csdn.net/weixin_44119391/article/details/128577681 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 2.安装 sudo chmod 777 -R ./Anaconda3-5.3.1-Linux-x86_64.sh ./Anaconda3-5.3.1-Linux-x86_64.sh Enter键确认安装…...

编程日记 2024/10/8 5:25:32

使用 SAP ABAP Webdynpro 实现 ABAP Push Channel 的 Web Socket 客户端

本系列前三篇文章，笔者向大家介绍了基于 ABAP Push Channel(简称 APC)的 TCP Socket 服务器端和客户端的编程，以及 Web Socket 的服务器端实现。 使用 ABAP 实现 TCP Socket 编程 (1) - 客户端部分的实现使用 ABAP 实现 TCP Socket 编程 (2) - 服务器端部分的实现使用 ABAP 实…...

编程日记 2024/10/8 5:23:30

15分钟学 Python 第41天：Python 爬虫入门（六）第二篇

Day41&#xff1a;Python爬取猫眼电影网站的电影信息 1. 项目背景 在本项目中&#xff0c;我们将使用 Python 爬虫技术从猫眼电影网站抓取电影信息。猫眼电影是一个知名的电影信息平台&#xff0c;提供了丰富的电影相关数据。通过这个练习&#xff0c;您将深入学习如何抓取动…...

编程日记 2024/10/8 5:22:29

电脑提示d3dcompiler_47.dll缺失怎么修复,仔细介绍dll的解决方法

1. d3dcompiler_47.dll 概述 1.1 定义与作用 d3dcompiler_47.dll 是 Microsoft DirectX 的一个关键组件&#xff0c;作为一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;它在 Windows 操作系统中扮演着至关重要的角色。DirectX 是一套由微软开发的用于处理多媒体…...

编程日记 2024/10/8 5:19:26

CPU中的寄存器是什么以及它的工作原理是什么？

在计算机科学中&#xff0c;寄存器是数字设备中的一个重要组成部分&#xff0c;它用于存储数据和指令以快速处理。寄存器充当临时存储区&#xff0c;信息可以在这里被快速访问和操作&#xff0c;以执行复杂任务。寄存器是计算机中最基础的存储类型&#xff0c;它们在帮助机器高…...

编程日记 2024/10/8 5:18:25

【EXCEL数据处理】000021 案例 保姆级教程，附多个操作案例。EXCEL文档安全性设置。

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【EXCEL数据处理】000021 案例 保姆级教程&#xff0c;附多个操作案例。…...

编程日记 2024/10/8 5:17:22

windows7 32bit安装JDK以及EclipseEE

如果你的电脑是 Windows 7 32-bit 系统&#xff0c;那么需要下载并安装适用于 32-bit 系统的 JDK 和 Eclipse EE。以下是具体的步骤和下载链接&#xff1a; 1. 下载并安装适用于 Windows 32-bit 的 JDK 1.1 下载适用于 32-bit 的 JDK Oracle 不再提供最新版本的 32-bit JDK&…...

编程日记 2024/10/8 5:16:21

Python中的Enum

Python中的Enum Enum&#xff08;枚举&#xff09;在很多应用场景中都会出现&#xff0c;因此绝大部分编程语言都实现了Enum类型&#xff0c;Python也不列外&#xff0c;但列外的是Enum在Python3.4中才被正式支持&#xff0c;我们先来看看Python3中的Enum是怎么使用的。 枚举的…...

编程日记 2024/10/8 5:14:19

于BERT的中文问答系统12

主要改进点 日志配置&#xff1a; 确保日志文件按日期和时间生成&#xff0c;便于追踪不同运行的记录。 数据处理&#xff1a; 增加了对数据加载过程中错误的捕获和日志记录&#xff0c;确保程序能够跳过无效数据并继续运行。 模型训练&#xff1a; 增加了重新训练模型的功…...

编程日记 2024/10/8 5:12:17

基于SpringBoot“花开富贵”花园管理系统【附源码】

效果如下&#xff1a; 系统注册页面 系统首页界面 植物信息详细页面 后台登录界面 管理员主界面 植物分类管理界面 植物信息管理界面 园艺记录管理界面 研究背景 随着城市化进程的加快和人们生活质量的提升&#xff0c;越来越多的人开始追求与自然和谐共生的生活方式&#xf…...

编程日记 2024/10/8 5:11:16

MySQL连接查询：自连接

先看我的表结构 emp表 自连接也就是把一个表看作是两个作用的表就好&#xff0c;也就是说我把emp看作员工表&#xff0c;也看做领导表 自连接 基本语法 select 字段列表 FROM 表A 别名A JOIN 表A 别名B ON 条件;例子1&#xff1a;查询员工 及其 所属领导的名字 select a.n…...

编程日记 2024/10/8 5:10:14

Prometheus+Grafana备忘

Grafana安装 官网 https://grafana.com/grafana/download 官网提供了几种安装方式&#xff0c;我用最简单的 yum install -y https://dl.grafana.com/enterprise/release/grafana-enterprise-11.2.2-1.x86_64.rpm启动 //如果需要在系统启动时自动启动Grafana&#xff0c;可以…...

编程日记 2024/10/8 5:09:12

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/12/24 7:04:13

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/12/22 19:40:26

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

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/12/24 20:31:47

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2025/12/24 23:36:16

Linux安全加固：从攻防视角构建系统免疫

Linux安全加固：从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言：攻防对抗的新纪元 在日益复杂的网络威胁环境中，Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示，高级持续性威胁（APT）攻击同比增长65%，平均入侵停留时间缩短至48小时。本章将从…...

编程新知 2025/9/30 15:48:08

OPENCV图形计算面积、弧长API讲解（1）

一.OPENCV图形面积、弧长计算的API介绍 之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积&#xff0c;这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能&#xff0c;常用的API…...

编程新知 2025/12/24 17:28:01