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

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

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

相关文章:

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

需求: 最近在测试在网页端(HTML5)调用移动设备的定位等权限功能,发现某些功能是必须保证域名在https下的否则会出现不正常现象。 解决: 1.在线生成和证书 访问:CSR文件生成工具-中国数字证书CHINASSL …...

3.5 认识决策树

3.5 认识决策树 3.5.1 认识决策树 如何高效的进行决策? 特征的先后顺序 3.5.2 决策树分类原理详解 已知有四个特征,预测 是否贷款给某个人。 先看房子,再看工作,是否贷款。 年龄,信贷情况,工作&#…...

股市复盘笔记

复盘是股市投资中非常重要的一个环节,它指的是投资者在股市收盘后,对当天的市场走势、个股表现以及自己的交易行为进行回顾和总结,以便更好地指导未来的投资决策。以下是对复盘的详细解释: 一、复盘的目的 总结市场走势&#xff…...

Canal 深入解析:从原理到实践的全面解读

Canal 深入解析:从原理到实践的全面解读 官网:https://github.com/alibaba/canal Canal 是阿里巴巴开源的一款分布式增量数据同步工具,广泛应用于数据同步、实时数据处理和数据库的增量备份等场景。它可以通过监听 MySQL 数据库的 binlog&am…...

SQL SERVER 2016 AlwaysOn 无域集群+负载均衡搭建与简测

之前和很多群友聊天发现对2016的无域和负载均衡满心期待,毕竟可以简单搭建而且可以不适用第三方负载均衡器,SQL自己可以负载了。windows2016已经可以下载使用了,那么这回终于可以揭开令人憧憬向往的AlwaysOn2016 负载均衡集群的神秘面纱了。 …...

解决 Maven 部署中的 Artifact 覆盖问题:实战经验分享20241204

🛠️ 解决 Maven 部署中的 Artifact 覆盖问题:实战经验分享 📌 引言 在软件开发过程中,持续集成和持续部署(CI/CD)是提高开发效率和代码质量的关键手段。Hudson 和 Maven 是两种广泛使用的工具&#xff0…...

【开源免费】基于SpringBoot+Vue.JS中小型医院网站(JAVA毕业设计)

博主说明:本文项目编号 T 078 ,文末自助获取源码 \color{red}{T078,文末自助获取源码} T078,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...

Linux CentOS

​阿里云开源镜像下载链接 https://mirrors.aliyun.com/centos/7/isos/x86_64/ VMware 安装 CentOS7 自定义 下一步 选择稍后安装操作系统 选择 输入 查看物理机CPU内核数量 CtrlShiftEsc 总数不超过物理机内核数量 推荐内存 自选 推荐 推荐 默认 拆分成多个 默认 自定义硬件…...

Android SurfaceFlinger layer层级

壁纸作为显示的最底层窗口它是怎么显示的 1. SurfaceFlinger layer层级 锁屏状态dump SurfaceFlinger ,adb shell dumpsys SurfaceFlinger Display 0 (active) HWC layers: -----------------------------------------------------------------------------------…...

spark-sql配置教程

1.前期准备 (1)首先要把hadoop集群,hive和spark等配置好 hadoop集群,hive的配置可以看看这个博主写的博客 大数据_蓝净云的博客-CSDN博客 或者看看黑马程序员的视频 黑马程序员大数据入门到实战教程,大数据开发必…...

生成表格pdf格式

1. 添加依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>kernel</artifactId><version>7.2.5</version></dependency><dependency><groupId>com.itextpdf</groupId><artifactId>layout…...

C++ 游戏开发的前沿趋势:从光线追踪到人工智能的全新挑战

随着游戏行业的快速发展&#xff0c;技术的不断进步为游戏开发带来了前所未有的机遇和挑战。从逼真的光影效果到复杂的物理模拟&#xff0c;再到智能化的非玩家角色&#xff08;NPC&#xff09;行为和玩家交互&#xff0c;现代游戏的技术需求已经超越了传统的图形渲染与场景搭建…...

微信小程序3-显标记信息和弹框

感谢阅读&#xff0c;初学小白&#xff0c;有错指正。 一、实现功能&#xff1a; 在地图上添加标记点后&#xff0c;标记点是可以携带以下基础信息的&#xff0c;如标题、id、经纬度等。但是对于开发来说&#xff0c;这些信息还不足够&#xff0c;而且还要做到点击标记点时&a…...

EasyNVR中HTTP-FLV协议无法播放怎么解决?

在科技日新月异的今天&#xff0c;摄像头作为公共安全领域的重要一环&#xff0c;其技术的不断提升正显著地改变着社会的安全格局。从最初的简单监控到如今的高清智能分析&#xff0c;我们可以对特定区域进行实时监控和记录&#xff0c;为社会的安全稳定提供了强有力的保障。 问…...

spring cloud之ribbon复习回顾

其实在项目中直接使用ribbon时不多&#xff0c;大多是使用feign的&#xff0c;其实feign底层也是通过ribbon构建的&#xff0c;主要记忆一下计算规则&#xff0c;ribbon的源码还是很不错的&#xff0c;还是值得学习的。 1、添加pom <dependency><groupId>org.spr…...

RFT 强化微调

OpenAI在今天发布的新技术&#xff0c;RFT结合了SFT和RL的优化算法&#xff0c;与传统的监督微调不同&#xff0c;强化微调旨在通过任务训练让模型掌握复杂推理能力&#xff0c;而不仅仅是“记住答案”。 什么是强化微调 强化微调是通过高质量任务数据和参考答案优化大语言模型…...

SpringBoot教程(三十二) SpringBoot集成Skywalking链路跟踪

SpringBoot教程&#xff08;三十二&#xff09; | SpringBoot集成Skywalking链路跟踪 一、Skywalking是什么&#xff1f;二、Skywalking与JDK版本的对应关系三、Skywalking下载四、Skywalking 数据存储五、Skywalking 的启动六、部署探针 前提&#xff1a; Agents 8.9.0 放入 …...

分布式搜索引擎Elasticsearch

Elasticsearch是一个基于Lucene库的开源分布式搜索引擎&#xff0c;它被设计用于云计算中&#xff0c;能够实现快速、near-real-time的搜索&#xff0c;并且可以进行大规模的分布式索引。 以下是一个简单的Python代码示例&#xff0c;展示如何使用Elasticsearch的Python客户端…...

在Vue.js中生成二维码(将指定的url+参数 生成二维码)

在Vue.js中生成二维码&#xff0c;你可以使用JavaScript库如qrcode或qr.js。以下是一个简单的例子&#xff0c;展示如何在Vue组件中使用qrcode库将指定的URL加上参数生成二维码。 首先&#xff0c;你需要安装qrcode库。如果你使用的是npm或yarn&#xff0c;可以通过命令行安装…...

统信桌面专业版部署postgresql-14.2+postgis-3.2方法介绍

文章来源&#xff1a;统信桌面专业版部署postgresql-14.2postgis-3.2方法介绍 | 统信软件-知识分享平台 应用场景 CPU架构&#xff1a;X86&#xff08;海光C86-3G 3350&#xff09; OS版本信息&#xff1a;1070桌面专业版 软件信息&#xff1a;postgresql-14.2postgis-3.2 …...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...