在Node.js局域网调试https的Vue项目

需求:

        最近在测试在网页端(HTML5)调用移动设备的定位等权限功能,发现某些功能是必须保证域名在https下的否则会出现不正常现象。

解决:

1.在线生成和证书
访问:CSR文件生成工具-中国数字证书CHINASSL
        填写好之后点生成即可,我们可以下载到两个文件。
        这里我的域名是192.168.3.151,得到192.168.3.151_csr.txt192.168.3.151_key.txt这两个文件(妥善保存)。

        然后再访问:自签名免费SSL证书签发-中国数字证书CHINASSL
        把192.168.3.151_csr.txt文件里的内容粘贴到代码框里,点获取免费证书之后可以下载到一个192.168.3.151_ssl.crt文件。

2.配置Node.js
参考Node.js配置源,确保已经配置好npm了。

安装express、fs、https模块:【必须】

npm install express --save
npm install fs --save
npm install https --save

安装express模块的相关依赖(可选):

npm install body-parser --save
npm install cookie-parser --save
npm install multer --save

安装完成后可以查看express的版本号:

npm list express

3.拷贝相关文件


192.168.3.151_key.txt192.168.3.151_ssl.crt(名字可能不同,但是格式是这样的)复制到你服务器程序同级目录下,比如我的目录就这三个文件:

192.168.3.151_key.txt
192.168.3.151_ssl.crt
app.js

app.js

//导入模块
const fs = require('fs')// 文件输入输出,用来导入证书        
const https = require('https')// https服务器  
const express = require('express')// express模块导入//读取证书
const privateKey = fs.readFileSync('192.168.3.151_key.txt', 'utf8')
const certificate = fs.readFileSync('192.168.3.151_ssl.crt', 'utf8')// 创建 express 应用
const app = express()
// 监听 / 路径的 get 请求
app.get('/', function(req, res) {res.send('Hello Word!')
})const credentials = { key: privateKey, cert: certificate }
const httpsServer = https.createServer(credentials, app)
const SSLPORT = 8080
httpsServer.listen(SSLPORT, function() {console.log('HTTPS 服务器已运行在: https://192.168.3.151:%s', SSLPORT)
})

使用Node.js运行app.js

在VSCode中新建一个终端,然后指定到当前的项目根目录,前提是这个项目已经是个完整功能的Vue项目,输入node app.js。提示运行在某个地址 说明已经成功启动https服务器。

然后在vue.config.js中加入一些代码:配置好主机端口和本地地址,https设为true

然后再新建一个终端,用于启动我们的Vue项目:

如果无报错,则会成功启动,域名变成了设置的localhost地址,端口号变成了8081,直接访问该地址,显示如下图页面类似就成功了,地址是借来的,凑合看吧。类似安全提示需点击继续访问即可。

设置信任这个证书就可以了~

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

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

相关文章

接口性能优化宝典:解决性能瓶颈的策略与实践

目录 一、直面索引 (一)索引优化的常见场景 (二)如何检查索引的使用情况 (三)如何避免索引失效 (四)强制选择索引 二、提升 SQL 执行效率 (一)避免不必…

linux 系列服务器 高并发下ulimit优化文档

系统输入 ulimit -a 结果如下 解除 Linux 系统的最大进程数 要解除或提高 Linux 系统的最大进程数,可以修改 ulimit 设置和 /etc/security/limits.conf 文件中的限制。 临时修改 ulimit 设置 可以使用 ulimit 命令来查看和修改当前会话的最大进程数: 查…

LinuxTCP编程详解

目录 一、创建套接字 二、绑定套接字 示例 三、监听套接字 四、等待套接字 五、服务器端示例 六、连接套接字 七、客户端示例 八、Send和Recv C/S模式:Client客户端、Server服务器 TCP编程基于socket套接字实现,因此也习惯称为Socket编程 一、…

我的后疫情时代DevOps

看了一下上一篇博文写作时间是四月份,一晃眼已经快八个月了,这段时间解决了什么?好像没什么起眼的事情,只有两件事情印象深刻: 1)没钱; 2)裁员。 如果你所在的单位是私营企业&#x…

增量预训练网络安全大模型的一次尝试

一、背景 探索使用网络安全知识,对开源基模型进行增强,评估是否能使基模型在网络安全领域表现出更好地专业度。 项目基于云起无垠SecGPT开源项目,在hugeface开源数据集的基础上,增加了自有预训练数据,进行增量预训练…

多线程---创建及方法

*线程创建的方式: 1.继承Thread类,重写run方法。 2.实现Runnable接口,重写run方法。 实际这两个run方法都重写的是Runnable中的run方法 简化方法: 1.匿名内部类创建Thread 子类对象 Thread thread new Thread(){Overridepub…

365天深度学习训练营-第P7周:马铃薯病害识别(VGG-16复现)

文为「365天深度学习训练营」内部文章 参考本文所写记录性文章,请在文章开头带上「👉声明」 🍺 要求: 自己搭建VGG-16网络框架【达成√】调用官方的VGG-16网络框架【达成√】如何查看模型的参数量以及相关指标【达成√】 &#…

【联表查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…

诗集鉴赏别有韵味——单例模式与工厂模式的浪漫邂逅

原文节选,出自两汉乐府诗集的《陌上桑》 日出东南隅,照我秦氏楼。秦氏有好女,自名为罗敷。罗敷喜蚕桑,采桑城南隅。青丝为笼系,桂枝为笼钩。头上倭堕髻,耳中明月珠。缃绮为下裙,紫绮为上襦。行者…

重学SpringBoot3-RestTemplate配置与使用详解

更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-RestTemplate配置与使用详解 1. 简介2. 环境要求3. 基础配置3.1 添加依赖3.2 RestTemplate配置类 4. 高级配置4.1 自定义连接池配置4.2 错误处理配置 5.…

基于YOLO模型的目标检测与识别实现在ESP32-S3 EYE上全流程部署

前言 文章首发于 基于YOLO模型的目标检测与识别实现在ESP32-S3 EYE上全流程部署 文章目录 前言项目环境安装ESP-IDF安装开发环境运行环境 训练数据集准备添加自定义数据集 下载预训练模型训练 YOLO 模型模型量化和格式转换模型结果评估训练损失评估指标模型推理 模型部署部署环…

Vue中使用ECharts图表中的阈值标记(附源码)

在数据处理和可视化领域,我们经常需要对一系列数据点进行分析。本文将介绍如何在给定的数据点中找到对应于特定Y值的X值,并设置标线起始点标记在ECharts图表中,效果图如下: 实现步骤 1、数据准备 let seriesData [// 提供日期…

如何将 Docker 镜像打包为 ZIP 文件便于分享和转发

在开发和部署中,我们常常需要将 Docker 镜像转发给其他团队成员或部署到不同的环境。如果无法直接访问镜像仓库(如 Docker Hub 或私有镜像仓库),可以选择将镜像保存为文件,并通过 ZIP 格式打包后进行分享。 本文将介绍…

岩体力学的材质-力学等属性的自动划分.

#背景: 在力学求解过程中,我们往往会对目标物体进行网格划分, 那么如何做到自动完成这个过程呢? 这里使用岩体力学中的地下岩层进行举例,这里只是简单的导入了4种界面, 复杂的可以一次性导入几十种界面,都可以计算(你能分多细,这个计算方式就可以帮你分层多细) 这里我只是导…

C++打造局域网聊天室第一课:编程环境及准备知识

文章目录 前言一、使用环境二、基础知识1.MFC(Microsoft Foundation Class)2.API(Application Programming Interface)3.Unicode编码4.简单的比较5.WinSock6.多线程知识 总结 前言 C打造局域网聊天室第一课:编程环境及…

项目-02-数学学院后台项目开发过程中的问题总结

目录 一、后台(pc端,vue2)1. dialog对话框被黑色蒙层盖住2. 将前端表格导出为word文档3. 在线查看、下载 .docx、.doc、.pdf文档 一、后台(pc端,vue2) 1. dialog对话框被黑色蒙层盖住 问题: d…

分类预测 | Matlab实现SO-LSSVM蛇群算法优化最小二乘支持向量机多特征分类预测

分类预测 | Matlab实现SO-LSSVM蛇群算法优化最小二乘支持向量机多特征分类预测 目录 分类预测 | Matlab实现SO-LSSVM蛇群算法优化最小二乘支持向量机多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现Matlab实现SO-LSSVM蛇群算法优化最小二乘支…

两个畸变矩阵相乘后还是一个2*2的矩阵,有四个畸变元素。1、畸变矩阵吸收了法拉第矩阵。2、畸变矩阵也给法拉第旋转角带来模糊(求解有多种可能)

角度一;恢复畸变的时候也把法拉第旋转恢复了 角度二:求解法拉第旋转角的时候 前面乘的复系数的不同也会带来法拉第旋转角和畸变的不同解 注意:无论多少个畸变矩阵相乘,结果都是2*2的矩阵,也就是畸变参数可以减少…

C# WinForm —— 39 40 41 42 DataGridView 介绍与使用

1. 简介 以网格的形式来显示表格数据,一般与数据库交互,将数据库中某一个表格的数据绑定到 UI控件上 并显示出来 网格中的行和列由用户自定义 三个重要对象:行、列、单元格 2. 属性 属性解释(Name)控件ID,在代码里引用的时候…

前端常用缓存技术深度剖析

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…