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 启一个前端代理服务的方法。

六、感谢

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/225322.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java数据结构-通过数组封装-结构分析

1、默认arrayList的数组未初始化 ArrayList<Integer> arrayList new ArrayList<>();System.out.println(ClassLayout.parseInstance(arrayList).toPrintable()); java.util.ArrayList object internals: OFF SZ TYPE DESCRIPTION …

自动驾驶学习笔记(十八)——Lidar感知

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo 社区开发者圆桌会》免费报名—>传送门 文章目录 前言 Lidar感知 运动补偿 点云分割 总结…

spring面试:一、面试题分类总览+bean线程安全问题+AOP相关问题(定义、使用步骤、编程式事务管理和声明式事务管理和声明式事务管理失效)

面试题分类总览 bean线程安全问题 单例/多例 单例&#xff08;singleton&#xff09;&#xff1a;在每个spring ioc容器中都只有一个实例。 多例&#xff08;prototype&#xff09;&#xff1a;在每个spring ioc容器中有多个实例。 默认情况下spring中的bean都是单例的。但是…

高并发如何实现单用户信息查询接口

高并发如何实现单用户信息查询接口 故事情节 产品&#xff1a;小李&#xff0c;有个单用户信息查询的功能&#xff0c;需要你实现一下小李&#xff1a;这还不简单&#xff0c;两分钟我给你实现两分钟过去…小李&#xff1a;欧克了&#xff0c;部署上线了运维&#xff1a;哪个…

数组和链表-内存存储分析

1、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.…

动态规划——斐波那契数列模型:1137.第N个泰波那契数

文章目录 题目描述算法原理1.状态表示(最重要的&#xff09;什么是状态表示&#xff1f;状态表示怎么来的呢&#xff1f;本题的状态表示 2.状态转移方程(最难的&#xff09;本题的状态转移方程 3.初始化(后三步完成剩下百分之一的细节问题&#xff09;本题的初始化 4.填表顺序本…

C语言实现快速傅立叶(FFT)(一)

1. FFT理论相关知识 FFT&#xff08;快速傅里叶变换&#xff09;其本质就是DFT&#xff0c;只不过可以快速的计算出DFT结果&#xff0c;所以首先应该理解DFT&#xff0c;DFT(Discrete Fourier Transform) 离散傅里叶变换的缩写&#xff0c;FFT(Fast Fourier Transform)快速傅里…

【算法与数据结构】376、LeetCode摆动序列

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题难点在于要考虑到不同序列的情况&#xff0c;具体来说要考虑一下几种特殊情况&#xff1a; 1、上…

4.qml 3D-Light、DirectionalLight、PointLight、SpotLight、AxisHelper类深入学习

今天我们学习灯光类 首先来学习Light类&#xff0c;它是所有灯光的虚基类&#xff0c;该类是无法创建的&#xff0c;主要是为子类提供很多公共属性。 常用属性如下所示&#xff1a; ambientColor : color&#xff0c;该属性定义在被该光照亮之前应用于材质的环境颜色。默认值…

oracle 锁表解决办法

相关表介绍 V$LOCKED_OBJECT&#xff08;记录锁信息的表&#xff09;v$session&#xff08;记录会话信息的表&#xff09;v$sql&#xff08;记录 sql 执行的表&#xff09;dba_objects&#xff08;用来管理对象&#xff0c;表、库等等&#xff09; 查询锁表的 SID select b.…

Cockpit upload文件上传漏洞(CVE-2023-1313)

0x01 产品简介 Cockpit 是一个自托管、灵活且用户友好的无头内容平台,用于创建自定义数字体验。 0x02 漏洞概述 Cockpit assetsmanager/upload接口处存在文件上传漏洞,攻击者可通过该漏洞在服务器端任意上传代码,写入后门,获取服务器权限,进而控制整个web服务器。 0x0…

Web开发伴侣 Prepros 7.17 Crack

您友好的 Web 开发伙伴&#xff0c;Prepros 编译您的文件、转译您的 JavaScript、重新加载您的浏览器并 使开发变得非常容易测试您的网站&#xff0c;以便您可以专注于制作 他们完美。 编译一切 Prepros 可以编译 Sass、Less、Stylus、Pug/Jade、Haml、Slim、CoffeeScript 和 …

翻译: 为什么需要微调大模型 Why Fine-tuning LLM

虽然RAG提供了一种方式来给大型语言模型提供额外的信息&#xff0c;但还有另一种叫做微调&#xff08;fine-tuning&#xff09;的技术&#xff0c;也是给它更多信息的一种方式。特别是&#xff0c;如果你有的上下文比大型语言模型的输入长度或上下文窗口长度更大&#xff0c;那…

如何使用ArcGIS Pro拼接影像

为了方便数据的存储和传输&#xff0c;我们在网上获取到的影像一般都是分块的&#xff0c;正式使用之前需要对这些影像进行拼接&#xff0c;这里为大家介绍一下ArcGIS Pro中拼接影像的方法&#xff0c;希望能对你有所帮助。 数据来源 本教程所使用的数据是从水经微图中下载的…

ArcGIS Pro SDK文件选择对话框

文件保存对话框 // 获取默认数据库var gdbPath Project.Current.DefaultGeodatabasePath;//设置文件的保存路径SaveItemDialog saveLayerFileDialog new SaveItemDialog(){Title "Save Layer File",OverwritePrompt true,//获取或设置当同名文件已存在时是否出现…

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

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

微服务架构之争:Quarkus VS Spring Boot

在容器时代&#xff08;“Docker时代”&#xff09;&#xff0c;无论如何&#xff0c;Java仍然活着。Java在性能方面一直很有名&#xff0c;主要是因为代码和真实机器之间的抽象层&#xff0c;多平台的成本&#xff08;一次编写&#xff0c;随处运行——还记得吗&#xff1f;&a…

虚拟电厂 能源物联新方向

今年有多热&#xff1f;据上海市气象局官微消息&#xff0c;5月29日13时09分&#xff0c;徐家汇站气温达36.1℃&#xff0c;打破了百年来的当地5月份气温*高纪录。不仅如此&#xff0c;北京、四川、江西、湖南、广东、广西等地也频频发布高温预警。 伴随着居民用电急剧攀升&am…

Gitee:远程仓库步骤

第一步&#xff1a;新建仓库 第二步&#xff1a;初始化本地仓库&#xff0c;git init 创建分支 git branch 新分支名 第三步&#xff1a;git add . &#xff1a;添加到暂存区 第四步&#xff1a;git config –global user.email关联邮箱&#xff0c;user.name用户名 第…

WX小程序案例(一):弹幕列表

WXML内容 <!--pages/formCase/formCase.wxml--> <!-- <text>pages/formCase/formCase.wxml</text> --> <view class"bk bkimg"><!-- <image src"/static/imgs/ceeb653ely1g9na2k0k6ug206o06oaa8.gif" mode"scal…