当前位置: 首页 > 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…...

KITTI 3D目标检测评估工具evaluate_object.cpp编译与使用避坑指南(附修改代码)

KITTI 3D目标检测评估工具深度解析&#xff1a;从编译优化到实战技巧 在自动驾驶算法研发领域&#xff0c;KITTI数据集及其评估工具链已成为行业事实上的黄金标准。作为计算机视觉与自动驾驶研究的重要基础设施&#xff0c;KITTI评估工具的正确使用直接关系到算法性能评估的准确…...

普冉PY32F071内存紧张?FreeRTOS配置优化全攻略(含heap_4选择与任务栈设置)

普冉PY32F071内存紧张&#xff1f;FreeRTOS配置优化全攻略&#xff08;含heap_4选择与任务栈设置&#xff09; 当你在PY32F071这颗Cortex-M0芯片上运行FreeRTOS时&#xff0c;是否遇到过任务莫名崩溃、系统运行不稳定的情况&#xff1f;作为一款仅有20KB RAM的微控制器&#xf…...

GPU资源管理混乱?nvitop一站式解决方案深度解析

GPU资源管理混乱&#xff1f;nvitop一站式解决方案深度解析 【免费下载链接】nvitop An interactive NVIDIA-GPU process viewer and beyond, the one-stop solution for GPU process management. 项目地址: https://gitcode.com/gh_mirrors/nv/nvitop 在深度学习训练、…...

终极指南:5个实用技巧解决Rainmeter开发中的内存保护异常问题

终极指南&#xff1a;5个实用技巧解决Rainmeter开发中的内存保护异常问题 【免费下载链接】rainmeter Desktop customization tool for Windows 项目地址: https://gitcode.com/gh_mirrors/ra/rainmeter 在Rainmeter桌面定制工具的开发过程中&#xff0c;内存保护异常&a…...

CHORD-X从零开始:C语言基础概念学习报告自动生成教程

CHORD-X从零开始&#xff1a;C语言基础概念学习报告自动生成教程 你是不是也遇到过这样的烦恼&#xff1f;作为编程老师&#xff0c;每次讲完C语言的指针、结构体这些难点&#xff0c;总想给学生一份清晰易懂的复习报告&#xff0c;但自己动手整理又太花时间。或者&#xff0c…...

零基础学编程:借助快马与claude code生成交互式代码示例入门javascript

最近刚开始学习JavaScript&#xff0c;发现数组操作是编程中最基础也最常用的部分。作为一个完全零基础的小白&#xff0c;我尝试用InsCode(快马)平台结合Claude Code来学习这个知识点&#xff0c;整个过程比想象中顺利很多。这里记录下我的学习过程&#xff0c;希望能帮到同样…...

TscanCode静态代码扫描工具原理与实践

嵌入式静态代码扫描工具TscanCode深度解析1. 静态代码分析技术概述1.1 静态代码扫描原理静态代码扫描是一种在不实际执行程序的情况下&#xff0c;通过词法分析、语法分析、控制流和数据流分析等技术对源代码进行检测的方法。这种技术能够有效识别代码中潜在的错误和缺陷&#…...

基于粒子群优化算法的永磁同步电机PMSM参数辨识:‘粒子群迭代‘至‘再次循环或结束

基于粒子群优化算法的永磁同步电机PMSM参数辨识 关键词&#xff1a;永磁同步电机 粒子群优化算法 参数辨识 ① 粒子群迭代 ②更新速度并对速度进行边界处理 ③更新位置并对位置进行边界处理 ④进行自适应变异 ⑤进行约束条件判断并计算新种群各个个体位置的适应度 ⑥新适应度与…...

YOLOv11目标检测与伏羲气象模型的融合应用:灾害天气图像识别预警

YOLOv11目标检测与伏羲气象模型的融合应用&#xff1a;灾害天气图像识别预警 最近几年&#xff0c;极端天气好像越来越频繁了。有时候&#xff0c;一场突如其来的暴雨或浓雾&#xff0c;就能让整个城市的交通陷入瘫痪&#xff0c;甚至带来不小的经济损失。传统的天气预报&…...

d-id AI studio会员值得买吗?实测3大核心功能与免费版对比

d-id AI studio会员深度评测&#xff1a;三大核心功能实测与免费版差异全解析 在数字内容创作领域&#xff0c;AI视频工具正掀起一场革命。作为行业新锐&#xff0c;d-id AI studio凭借其独特的面部动画技术&#xff0c;让普通用户也能轻松制作专业级动态视频。但对于已经体验…...