在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,直接访问该地址,显示如下图页面类似就成功了,地址是借来的,凑合看吧。类似安全提示需点击继续访问即可。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

视频监控汇聚平台Liveweb视频安防监控实时视频监控系统操作方案

Liveweb国标GB28181视频平台是一种基于国标GB/T28181协议的安防视频流媒体能力平台。它支持多种视频功能,包括实时监控直播、录像、检索与回看、语音对讲、云存储、告警以及平台级联等功能。该平台部署简单、可扩展性强,支持全终端、全平台分发接入的视频…

如何利用内链策略提升网站的整体权重?

内链是谷歌SEO中常常被低估的部分,实际上,合理的内链策略不仅能帮助提升页面间的关联性,还可以增强网站的整体权重。通过正确的内链布局,用户可以更流畅地浏览你的网站,谷歌爬虫也能更快地抓取到更多页面,有…

DICOM MPPS详细介绍

文章目录 前言一、常规检查业务流程二、MPPS的作用三、MPPS的原理1、MPPS与MWL2、MPPS服务过程 四、MPPS的实现步骤1、创建实例2、传递状态 五、总结 前言 医院中现有的DICOM MWL(Modality Worklist)已开始逐渐得到应用,借助它可以实现病人信息的自动录入&#xff0…

44页PDF | 信息化战略规划标准框架方法论与实施方法(限免下载)

一、前言 这份报告详细介绍了企业信息化战略规划的标准框架、方法论以及实施方法,强调了信息化规划应以业务战略和IT战略为驱动力,通过构筑企业架构(EA)来连接长期战略和信息化建设。报告提出了信息化规划原则,探讨了…

Linux 权限管理:用户分类、权限解读与常见问题剖析

🌟 快来参与讨论💬,点赞👍、收藏⭐、分享📤,共创活力社区。🌟 🚩用通俗易懂且不失专业性的文字,讲解计算机领域那些看似枯燥的知识点🚩 目录 💯L…

flask内存马的真谛!!!

flask内存马 1.概念 常用的Python框架有Django、Flask, 这两者都可能存在SSTI漏洞. Python 内存马利用Flask框架中SSTI注入来实现, Flask框架中在web应用模板渲染的过程中用到render_template_string进行渲染, 但未对用户传输的代码进行过滤导致用户可以通过注入恶意代码来实…

AI技术在电商行业中的应用与发展

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

计算机网络期末复习-part1-概述

1、互联网的组成 互联网由两大块组成。 1、边沿部分:由所有连接在互联网上的主机组成,是用户直接使用的部分。 2、核心部分,由大量网络和路由器组成,为边缘部分提供服务。 2、数据传送阶段的三种交换方式的主要特点 1、电路交…

『数据结构』空间复杂度

🚩 WRITE IN FRONT 🚩 🔎 介绍:"謓泽"正在路上朝着"攻城狮"方向"前进四" 🔎🏅 荣誉:2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…

使用GDI对象绘制UI时需要注意的若干细节问题总结

目录 1、一个bitmap不能同时被选进两个dc中 2、CreateCompatibleDC和CreateCompatibleBitmap要使用同一个dc作为参数 3、不能删除已经被选入DC中的GDI对象 4、使用完的GDI对象,要将之释放掉,否则会导致GDI对象泄漏 5、CreateCompatibleBitmap返回错…

NineData云原生智能数据管理平台新功能发布|2024年11月版

本月发布 8 项更新,其中重点发布 2 项、功能优化 6 项。 重点发布 数据库 Devops - 数据生成支持多个数据源 NineData 支持在数据库中自动生成符合特定业务场景的随机数据,用于模拟实际生产环境中的数据情况,帮助用户在不使用真实数据的情况…

Github clone 的时候出现Error in the HTTP2 framing layer错误

解决方案 github鉴权认证,打开gitbash,并输入 ssh-keygen -t rsa -C "emailicjs.cc" 执行后会在 .ssh 目录生产两个文件:id_rsa(私有密钥)和id_rsa.pub(公开密钥) 直接默认回车执行…

html-两个div,让一个div跟随另外一个div的高度

在开发的过程中遇到有些场景事这样的,两个div的高度不一致,而且都是动态高度,有的时候div1高,有的时候div2高,如果设置flex的话,那么就会把较矮的元素撑大,但是我想始终都以div1的高度作为基准&…

【Java-数据结构篇】Java 中栈和队列:构建程序逻辑的关键数据结构基石

我的个人主页 我的专栏:Java-数据结构,希望能帮助到大家!!!点赞❤ 收藏❤ 一、引言 1. 栈与队列在编程中的角色定位 栈和队列作为两种基本的数据结构,在众多编程场景中都有着独特的地位。它们为数据的有序…

EasyAnimateV5 视频生成大模型原理详解与模型使用

在数字内容创作中,视频扮演的角色日益重要。然而,创作高质量视频通常耗时且昂贵。EasyAnimate 系列旨在利用人工智能技术简化这一过程。EasyAnimateV5 建立在其前代版本的基础之上,不仅在质量上有所提升,还在多模态数据处理和跨语…

浅谈volatile

volatile有三个特性: (1)可见性 (2)不保证原子性 (3)禁止指令重排 下面我们一一介绍 (一)可见性 volatile的可见性是说共享变量只要修改,就可以被其他线…

深入理解AVL树:结构、旋转及C++实现

1. AVL树的概念 什么是AVL树? AVL树是一种自平衡的二叉搜索树,其发明者是Adelson-Velsky和Landis,因此得名“AVL”。AVL树是首个自平衡二叉搜索树,通过对树的平衡因子进行控制,确保任何节点的左右子树高度差最多为1&…

电脑插入耳机和音响,只显示一个播放设备

1. 控制面板-硬件和声音-Realtek高清音频-扬声器-设备高级设置-播放设备里选择使用前部和后部输出设备同时播放两种不同的音频流 在声音设置中就可以看到耳机播放选项

网络练级宝典-> UDP传输层协议

目录 传输层 端口号 端口号和进程的关系 UDP协议 UDP协议格式 UDP数据封装: UDP数据分用: 面向数据报 UDP的缓冲区 UDP的缺点 基于UDP的应用层协议 传输层 端口号 我们知道端口号对应的其实就是一个进程的pid,在操作系统中二者的…

基于飞腾S2500处理器的全国产加固服务器

近日,西安康德航测电子科技有限公司凭借其深厚的行业底蕴和创新精神,正式推出了基于飞腾S2500处理器的全国产加固服务器。这一产品的问世,不仅标志着我国在信息技术领域的自立自强迈出了坚实的一步,更以其卓越的性能、坚固的设计和…