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

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

news 文章来源：https://blog.csdn.net/dgiij/article/details/142689510 2025/5/9 13:59:31

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

基于ssm实现的建筑装修图纸管理平台（源码+文档）

项目简介 基于ssm实现的建筑装修图纸管理平台&#xff0c;主要功能如下&#xff1a; 技术栈 后端框框&#xff1a;spring/springmvc/mybatis 前端框架&#xff1a;html/JavaScript/Css/vue/elementui 运行环境&#xff1a;JDK1.8/MySQL5.7/idea&#xff08;可选&#xff09…...

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

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-07

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-07 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-07目录1. Evaluation of Large Language Models for Summarization Tasks in the Medical Domain: A Narrative Review摘要研究…...

编程日记 2024/10/8 5:06:07

Mahalanobis distance 马哈拉诺比斯距离

马哈拉诺比斯距离&#xff08;Mahalanobis Distance&#xff09;是一种衡量点与分布之间距离的度量&#xff0c;尤其适用于多维数据。与欧几里得距离不同&#xff0c;马哈拉诺比斯距离考虑了数据的协方差结构&#xff0c;因此在统计分析和异常值检测中非常有用。 定义 给定一…...

编程日记 2024/10/8 5:05:06

R语言绘制直方图

直方图是一种统计图表。它将数据分成若干区间&#xff0c;统计每个区间内数据的数量或频率&#xff0c;用矩形条高度表示。能直观展现数据分布特征&#xff0c;如集中趋势、离散程度等。在数据分析、质量控制、市场调研等领域广泛应用&#xff0c;可帮助人们快速了解数据整体形…...

编程日记 2024/10/8 5:04:05

论文阅读笔记-LogME: Practical Assessment of Pre-trained Models for Transfer Learning

前言 在NLP领域，预训练模型（准确的说应该是预训练语言模型）似乎已经成为各大任务必备的模块了，经常有看到文章称后BERT时代或后XXX时代，分析对比了许多主流模型的优缺点，这些相对而言有些停留在理论层面，可是有时候对于手上正在解决的任务，要用到预训练语言模型时，面…...

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

求二叉树的带权路径长度

二叉树的带权路径长度&#xff08;WPL&#xff09;是二叉树中所有叶结点的带权路径长度之和。给定一棵二叉树T&#xff0c;采用二叉链表存储。结点结构为&#xff1a; 其中叶结点的weight域保存该结点的非负权值。设root为指向T的根结点的指针&#xff0c;请设计求T的WPL的算法…...

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

Hive数仓操作（十五）

Hive 开窗函数 Hive窗口函数是一种特殊的函数&#xff0c;允许用户在查询中对一组行进行计算&#xff0c;而不仅仅是单独的行。窗口函数可以在 SQL 查询中进行聚合、排名、累积计算等。这使得窗口函数在数据分析和报告生成中非常有用。 窗口函数的基本组成部分 函数类型&…...

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

No.12 笔记 | 网络基础：ARP DNS TCP/IP与OSI模型

一、计算机网络&#xff1a;安全的基石 1. 网络的本质&#xff1a;数字世界的神经系统 定义&#xff1a;计算机的互联互通&#xff0c;实现资源共享和信息交换组成要素&#xff1a;发送者、接收者、介质、数据、协议&#xff08;五大要素&#xff09; 2. 网络架构&#xff1…...

编程日记 2024/10/8 4:58:58

OpenHarmony（鸿蒙南向开发）——轻量系统STM32F407芯片移植案例

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 介绍基于STM32F407IGT6芯片在拓维信息 Niobe407 开发板上移植OpenH…...

编程日记 2024/10/8 4:56:55

简单易懂的springboot整合Camunda 7工作流入门教程

简单易懂的Spring Boot整合Camunda7入门教程 因为关于Spring Boot结合Camunda7的教程在网上比较少&#xff0c;而且很多都写得有点乱&#xff0c;很多概念写得太散乱&#xff0c;讲解不清晰&#xff0c;导致看不懂&#xff0c;本人通过研究学习之后就写出了这篇教学文档。 介…...

编程日记 2024/10/8 4:55:53