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

node.js 启一个前端代理服务

文章目录

  • 前言
  • 一、分析技术
  • 二、操作步骤
    • 2.1、下载依赖
    • 2.2、创建一个 serve.js 文件
    • 2.3、js 文件中写入以下代码
  • 三、运行: node serve
  • 四、结果展示
  • 五、总结
  • 六、感谢

前言

有时候我们需要做一些基础的页面时,在研发过程中需要代理调用接口避免浏览器跨域的情况,也方便局域网中研发查看我们做的页面时,就需要启动一个服务来将自己的网页放在服务上来测试和预览。


一、分析技术

前端最常用的就是 node ,所以我们可以采用 node 起一个小的服务就很方便也很快。

二、操作步骤

2.1、下载依赖

在一个文件夹中下载依赖,位置就是当前文件夹。cd (当前文件夹)
下载 express

npm install express

下载 http-proxy-middleware

npm install http-proxy-middleware

2.2、创建一个 serve.js 文件

在当前文件夹场景一个 js 文件。
在这里插入图片描述

2.3、js 文件中写入以下代码

在之前创建的 js 文件中写入代码,可以根据自己的需求进行修改。

//设置代理,主要用于调用后端提供的接口
const options = {target: 'http://192.168.1.1:12002',   // 代理地址 changeOrigin: true,    // 默认false,是否需要改变原始主机头为目标URL,一定要改的ws: true,              // 是否代理websocketspathRewrite: {'/api' : '/',     // 重写请求,比如我们源访问的是/api/old-path,那么请求会被解析为/api/new-path'/test' : '/testNew',}
}let net = require('net');
const os = require('os');let dk=3000; // 端口// 检测端口是否被占用
function portIsOccupied (port) {// 创建服务并监听该端口var server = net.createServer().listen(port)server.on('listening', function () { // 执行这块代码说明端口未被占用server.close() // 关闭服务console.log('端口【' + port + '】 启动。') // 控制台输出信息// startServer(); // 启服务startServer(); // 启服务})server.on('error', function (err) {if (err.code === 'EADDRINUSE') { // 端口已经被使用console.log('端口【' + port + '】 已经被占用,请修改端口。')dk++;portIsOccupied(dk);}})
}// 执行
portIsOccupied(dk);/*** 获取当前机器的ip地址*/
function getIpAddress() {let ifaces = os.networkInterfaces()for (let dev in ifaces) {let iface = ifaces[dev]for (let i = 0; i < iface.length; i++) {let { family, address, internal } = iface[i]if (family === 'IPv4' && address !== '127.0.0.1' && !internal) {return address}}}
}function startServer(params) {const express = require('express');let app = express();app.use(express.static("./"))const { createProxyMiddleware } = require('http-proxy-middleware');//引入const proxy1 = createProxyMiddleware(options);app.use('/api',proxy1); 	// 表示前端访问/apis时就是访问这个接口app.use('/ahzw',proxy1); 	// 表示前端访问/apis时就是访问这个接口app.listen(dk);  console.log('服务器开启成功: http://'+getIpAddress()+":"+dk + "/mockEntry.html");
}

三、运行: node serve

在终端命令行输入:node serve
就可以在当前位置起一个服务访问这个 serve.js 文件旁边的文件。
在这里插入图片描述

四、结果展示

五、总结

以上就是使用 node.js 启一个前端代理服务的方法。

六、感谢

如果觉得有用欢迎点赞关注。
有问题私信我!!~~
谢谢

相关文章:

node.js 启一个前端代理服务

文章目录 前言一、分析技术二、操作步骤2.1、下载依赖2.2、创建一个 serve.js 文件2.3、js 文件中写入以下代码 三、运行&#xff1a; node serve四、结果展示五、总结六、感谢 前言 有时候我们需要做一些基础的页面时&#xff0c;在研发过程中需要代理调用接口避免浏览器跨域…...

弹性搜索引擎Elasticsearch:本地部署与远程访问指南

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言系统环境1. Windows 安装Elasticsearch2. 本地访问Elasticsearch3. Windows 安装…...

微信小程序生成二维码海报并分享

背景&#xff1a;点击图标&#xff0c;生成海报后&#xff0c;点击保存相册&#xff0c;可以保存 生成海报&#xff1a;插件wxa-plugin-canvas&#xff0c;此处使用页面异步生成组件方式&#xff0c;官网地址&#xff1a;wxa-plugin-canvas - npm 二维码&#xff1a;调用后端…...

Windows安装Tesseract OCR与Python中使用pytesseract进行文字识别

文章目录 前言一、下载并安装Tesseract OCR二、配置环境变量三、Python中安装使用pytesseract总结 前言 Tesseract OCR是一个开源OCR&#xff08;Optical Character Recognition&#xff09;引擎&#xff0c;用于从图像中提取文本。Pytesseract是Tesseract OCR的Python封装&am…...

【答案】2023年国赛信息安全管理与评估第三阶段夺旗挑战CTF(网络安全渗透)

【答案】2023年国赛信息安全管理与评估第三阶段夺旗挑战CTF&#xff08;网络安全渗透&#xff09; 全国职业院校技能大赛高职组信息安全管理与评估 &#xff08;赛项&#xff09; 评分标准 第三阶段 夺旗挑战CTF&#xff08;网络安全渗透&#xff09; *竞赛项目赛题* 本文…...

springboot 集成 redis luttuce redisson ,单机 集群模式(根据不同环境读取不同环境的配置)

luttuce 和redisson配置过程中实际上是独立的&#xff0c;他们两个可以同时集成&#xff0c;但是没有直接相关关系&#xff0c;配置相对独立。 所以分为Lettuce 和 Redisson 两套配置 父pom <!-- Spring Data Redis --><dependency><groupId>org.springframe…...

PPT插件-好用的插件-PPT 素材该怎么积累-大珩助手

PPT 素材该怎么积累&#xff1f; 使用大珩助手中的素材库功能&#xff0c;将Word中的&#xff0c;或系统中的文本文件、图片、其他word文档、pdf&#xff0c;所有见到的好素材&#xff0c;一键收纳。 步骤&#xff1a;选中文件&#xff0c;按住鼠标左键拖到素材库界面中&…...

qt 正则表达式简单介绍

正则表达式即一个文本匹配字符串的一种模式,Qt中使用QRegExp类进行模式匹配.主要应用:字符串验证,搜索,替换,分割..... 正则表达式中字符及字符集 c 匹配字符本身&#xff0c;如a匹配a \c 跟在\后面的字符匹配字符本身&#xff0c;但本表中下面指定的这些字符除外。 \a 匹…...

Redis设计与实现之跳跃表

目录 一、跳跃表 1、跳跃表的实现 2、跳跃表的应用 3、跳跃表的时间复杂度是什么&#xff1f; 二、跳跃表有哪些应用场景&#xff1f; 三、跳跃表和其他数据结构&#xff08;如数组、链表等&#xff09;相比有什么优点和缺点&#xff1f; 四、Redis的跳跃表支持并发操作吗…...

[每周一更]-(第27期):HTTP压测工具之wrk

[补充完善往期内容] wrk是一款简单的HTTP压测工具,托管在Github上,https://github.com/wg/wrkwrk 的一个很好的特性就是能用很少的线程压出很大的并发量. 原因是它使用了一些操作系统特定的高性能 io 机制, 比如 select, epoll, kqueue 等. 其实它是复用了 redis 的 ae 异步事…...

【FunASR】Paraformer语音识别-中文-通用-16k-离线-large-onnx

模型亮点 模型文件: damo/speech_paraformer-large-vad-punc_asr_nat-zh-cn-16k-common-vocab8404-pytorchParaformer-large长音频模型集成VAD、ASR、标点与时间戳功能&#xff0c;可直接对时长为数小时音频进行识别&#xff0c;并输出带标点文字与时间戳&#xff1a; ASR模型…...

C语言中的柔性数组

uint8_t data[0];代码的含义老虎开始对这个数组不太了解&#xff0c;查阅后得知这是个柔性数组。 C语言中的柔性数组&#xff08;Flexible Array Member&#xff09;是一种特殊的数组&#xff0c;它被定义在结构体的最后一个元素中&#xff0c;其大小未知&#xff0c;也就是所…...

ca-certificates.crt解析加载到nssdb中

openssl crl2pkcs7 -nocrl -certfile /etc/ssl/certs/ca-certificates.crt | openssl pkcs7 -print_certs -noout -text ca-certificates.crt为操作系统根证书列表。 获取证书以后使用PK11_ImportDERCert将证书导入到nssdb中 base::FilePath cert_path base::FilePath("…...

聊聊Java中的常用类String

String、StringBuffer、StringBuilder 的区别 从可变性分析 String不可变。StringBuffer、StringBuilder都继承自AbstractStringBuilder &#xff0c;两者的底层的数组value并没有使用private和final修饰&#xff0c;所以是可变的。 AbstractStringBuilder 源码如下所示 ab…...

R语言piecewiseSEM结构方程模型在生态环境领域实践技术

结构方程模型&#xff08;Sructural Equation Modeling&#xff0c;SEM&#xff09;可分析系统内变量间的相互关系&#xff0c;并通过图形化方式清晰展示系统中多变量因果关系网&#xff0c;具有强大的数据分析功能和广泛的适用性&#xff0c;是近年来生态、进化、环境、地学、…...

IDEA设置查看JDK源码

问题 我们在查看JDK源码时&#xff0c;可能会遇到这种情况&#xff0c;步入底层查看JDK源码时&#xff0c;出现一堆var变量&#xff0c;可读性非常之差&#xff0c;例如笔者最近想看到nio包下的SocketChannelImpl的write方法&#xff0c;结果看到这样一番景象&#xff1a; pu…...

SSM—Mybatis

目录 和其它持久化层技术对比 搭建MyBatis 开发环境 创建maven工程 创建MyBatis的核心配置文件 创建mapper接口 创建MyBatis的映射文件 通过junit测试功能 加入log4j日志功能 核心配置文件详解 MyBatis的增删改查 新增 删除 修改 查询一个实体类对象 查询list集…...

MYSQL在不删除数据的情况下,重置主键自增id

MYSQL在不删除数据的情况下&#xff0c;重置主键自增id 方法一&#xff1a; SET num : 0; UPDATE table_name SET id num : (num1); ALTER TABLE table_name AUTO_INCREMENT 1; 方法二&#xff1a; 背景(mysql 数据在进行多次删除新增之后id变得很大&#xff0c;但是并没…...

SpringMVC-servlet交互

servlet交互 1.1 引入servlet依赖 <dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.1</version><scope>provided</scope></dependency>1.2 创建testservl…...

DICOM 文件中,VR,VL,SQ,图像二进制的几个注意点

DICOM 文件的结构&#xff0c;在网上有很多的学习资料&#xff0c;这里只介绍些容易混淆的概念&#xff0c;作为回看笔记。 1. 传输语法 每个传输语法&#xff0c;起都是表达的三个概念&#xff1a;大小端、显隐式、压缩算法 DICOM Implicit VR Little Endian: 1.2.840.1000…...

告别重复造轮子:用快马平台一键生成高效yolov11开发模板

告别重复造轮子&#xff1a;用快马平台一键生成高效yolov11开发模板 最近在做一个基于yolov11的目标检测项目&#xff0c;发现从零开始搭建开发环境特别费时间。光是配环境、写基础代码、整合工具链这些重复性工作&#xff0c;就占用了将近一半的开发周期。后来尝试用InsCode(…...

Paperxie AI 毕业论文写作,助力大学生高效搞定初稿

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AIPPThttps://www.paperxie.cn/ai/dissertationhttps://www.paperxie.cn/ai/dissertation 在本科毕业季的朋友圈里&#xff0c;总能刷到这样的动态&#xff1a;凌晨三点的台灯下&#xff0c;对着空白文档发…...

Canvas Quest人像修复与增强实战:老照片修复与画质提升

Canvas Quest人像修复与增强实战&#xff1a;老照片修复与画质提升 1. 老照片修复的痛点与解决方案 翻开家里的老相册&#xff0c;总能看到一些泛黄、破损或模糊的照片。这些承载着珍贵记忆的画面&#xff0c;往往因为年代久远而变得难以辨认。传统的手工修复不仅耗时费力&am…...

DAMO-YOLO实战:用AI视觉系统做内容安全审核与统计

DAMO-YOLO实战&#xff1a;用AI视觉系统做内容安全审核与统计 1. 引言&#xff1a;当AI视觉遇见内容安全 在数字内容爆炸式增长的今天&#xff0c;如何高效地进行内容审核成为许多平台面临的挑战。传统人工审核不仅效率低下&#xff0c;而且容易因疲劳导致误判。本文将介绍如…...

Pixel Dream Workshop 作品集:基于LSTM时序模型生成的动态艺术画展示

Pixel Dream Workshop 作品集&#xff1a;基于LSTM时序模型生成的动态艺术画展示 1. 当AI遇见艺术&#xff1a;LSTM如何创造动态视觉叙事 在数字艺术创作领域&#xff0c;时序模型正带来一场革命性的变化。Pixel Dream Workshop最新推出的动态艺术画系列&#xff0c;展示了长…...

OpenClaw跨平台同步:GLM-4.7-Flash配置在多设备复用

OpenClaw跨平台同步&#xff1a;GLM-4.7-Flash配置在多设备复用 1. 为什么需要跨设备同步OpenClaw配置 去年冬天&#xff0c;我在家里配置好OpenClaw接入GLM-4.7-Flash模型后&#xff0c;第二天到办公室想继续调试时&#xff0c;发现所有配置都要从头再来。这种重复劳动让我意…...

Linux性能调优实战:CPU与内存优化指南

Linux 性能调优实战指南1. 性能优化基础概念1.1 性能指标Linux性能优化的两个核心指标是吞吐量和延迟。从应用负载角度看&#xff0c;直接影响终端用户体验&#xff1b;从系统资源角度看&#xff0c;关注资源使用率和饱和度。性能问题的本质是系统资源已达瓶颈但请求处理不够快…...

毕业设计实战:基于SpringBoot+Vue+MySQL的智慧党建系统设计与实现指南

毕业设计实战&#xff1a;基于SpringBootVueMySQL的智慧党建系统设计与实现指南 在开发“基于SpringBootVueMySQL的智慧党建系统”毕业设计时&#xff0c;曾因活动报名记录表未通过党员ID与党建活动ID双外键关联踩过关键坑——初期仅单独设计报名记录表的报名编号字段&#xff…...

告别模糊概念:用ESP32 iperf例程和电脑热点,5分钟搞定无线模块压力测试

5分钟极简方案&#xff1a;用ESP32和电脑热点构建无线性能测试环境 在嵌入式开发中&#xff0c;无线模块的性能测试往往需要复杂的网络环境支持。但现实情况是&#xff0c;大多数开发者并不具备专业的测试设备或实验室环境。想象一下这样的场景&#xff1a;你正在咖啡厅调试一个…...

ApiPost实战指南:从接口创建到自动化测试的全流程解析

1. 从零开始创建你的第一个API接口 作为一个常年和API打交道的开发者&#xff0c;我深知新手第一次接触接口工具时的迷茫。ApiPost作为一款国产的API开发工具&#xff0c;用起来确实比Postman更顺手&#xff0c;特别是对中文用户特别友好。下面我就带你一步步创建第一个接口&am…...