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

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

news 2026/5/16 20:58:27

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

书匠策AI到底怎么帮你“生“出毕业论文？一个论文博主的拆解笔记

各位深夜还在跟Word较劲的同学们&#xff0c;我是那个天天教别人写论文、自己也被论文折磨过的教育博主。 今天不讲写作技巧&#xff0c;讲一个我自己反复用、觉得真能帮到人的工具——书匠策AI。 官网直达 官网直达&#xff1a;www.shujiangce.com微信搜一搜"书匠策AI…...

编程新知 2026/5/16 20:53:54

Go语言设计模式：行为型模式

Go语言设计模式&#xff1a;行为型模式 一、行为型模式概述 行为型模式关注对象之间的通信和职责分配&#xff0c;描述对象如何协作以及如何分配职责。 Go语言中的行为型模式特点 接口驱动&#xff1a;通过接口定义行为契约并发安全&#xff1a;考虑并发场景下的协作组合实现&a…...

编程新知 2026/5/16 20:51:36

T2080工控主板开发实战：从核心特性到系统部署全解析

1. 项目概述&#xff1a;从一块“硬核”主板说起 最近在整理手头的嵌入式项目资料&#xff0c;翻出了一块来自东大金智科技的T2080工控主板。这块板子在我经手过的众多嵌入式平台里&#xff0c;算是相当有“分量”的一位——不是指物理重量&#xff0c;而是其内在的“硬核”实力…...

编程新知 2026/5/16 20:38:53

为什么你的ElevenLabs免费额度突然归零？4个未公开的触发条件，第2条99%人中招！

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs免费额度突然归零的真相揭秘 近期大量开发者反馈 ElevenLabs 的免费 API 额度&#xff08;10,000 characters/month&#xff09;在未达用量上限时被强制重置为 0&#xff0c;且控制台不显示…...

编程新知 2026/5/16 20:11:16

为什么92%的斯里兰卡项目在ElevenLabs僧伽罗文语音上失败？——2024最新L10n兼容性白皮书首发（附实测RTT延迟对比数据）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;为什么92%的斯里兰卡项目在ElevenLabs僧伽罗文语音上失败&#xff1f; ElevenLabs 官方文档明确声明支持僧伽罗文&#xff08;Sinhala&#xff09;&#xff0c;但实际部署中&#xff0c;斯里兰卡本地政…...

编程新知 2026/5/16 19:14:52

鸿蒙页面代码构建：基于 HarmonyOS 6.0 的跨端开发实战

鸿蒙页面代码构建&#xff1a;基于 HarmonyOS 6.0 的跨端开发实战 前言 随着移动互联网和物联网的深度融合&#xff0c;应用开发正在从单一平台走向跨端、多终端协作的时代。华为鸿蒙操作系统&#xff08;HarmonyOS&#xff09;自诞生以来&#xff0c;一直致力于为开发者提供统…...

编程新知 2026/5/16 18:53:23

用MakeCode Arcade与树莓派Zero打造复古像素游戏：从拖拽编程到实体街机

1. 项目概述&#xff1a;为什么选择MakeCode Arcade开启你的游戏开发之旅&#xff1f;如果你对编程充满好奇&#xff0c;又或者一直想亲手制作一款属于自己的复古像素风游戏&#xff0c;但被一行行复杂的代码劝退&#xff0c;那么MakeCode Arcade就是你一直在寻找的答案。它不是…...

编程新知 2026/5/16 17:29:35

Divinity Mod Manager：如何用技术架构解决《神界：原罪2》模组管理的复杂性？

Divinity Mod Manager&#xff1a;如何用技术架构解决《神界&#xff1a;原罪2》模组管理的复杂性&#xff1f; 【免费下载链接】DivinityModManager A mod manager for Divinity: Original Sin - Definitive Edition. 项目地址: https://gitcode.com/gh_mirrors/di/Divinity…...

编程新知 2026/5/16 17:00:57

告别弹窗！若依框架(Ruoyi)详情页开发避坑指南：路由配置与参数传递详解

若依框架详情页开发实战&#xff1a;从路由配置到参数传递的深度解析 在若依框架的实际开发中&#xff0c;详情页的实现往往成为开发者遇到的"拦路虎"。明明按照文档操作&#xff0c;却频繁遭遇页面空白、参数丢失或控制台报错等问题。本文将深入剖析若依框架中前端路…...

编程新知 2026/5/16 15:40:32

3步构建跨平台AI自动化测试：Midscene.js视觉驱动解决方案

3步构建跨平台AI自动化测试&#xff1a;Midscene.js视觉驱动解决方案 【免费下载链接】midscene AI-powered, vision-driven UI automation for every platform. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene Midscene.js是一款基于视觉语言模型的跨平台…...

编程新知 2026/5/16 12:58:17