配置https环境

为什么要配置https环境

在使用 HTML5API 时,很多 API 只能在 https 保证安全的情况下才能开启。这就要求我们在本地开发环境也能够配置 https,否则你需要每次部署到配有 https 的测试环境中才能看到预览效果,这对开发的敏捷度造成了极大的干扰。

一、下载 mkcert

mkcert 是一个用 GO 写的零配置专门用来本地环境 https 证书生成的工具。

1、安装

文档地址:https://gitcode.net/mirrors/FiloSottile/mkcert?utm_source=csdn_github_accelerator

macOS、Linux、Windows 均可安装。

此处使用的是mac

  1. 直接使用 Homebrew 安装mkcert:
brew install mkcert
  1. 安装一个证书中心
mkcert -install

该命令会在您的本机安装一个证书中心,用于颁发证书,示例如下:

image-20220507195530536
  1. 查看证书中心的存放位置
mkcert mkcert --CAROOT

可以查看证书中心的存放位置,如下图所示:

image-20220507195554118

至此,我们的证书中心就搞定了,之后可以在具体的项目中生成证书文件和私钥。

2、在具体项目中生成证书文件和私钥

通过上面的步骤,我们在本机上安装了 CA(刚才的证书中心),接下来 cd 到需要生成凭证的目录下,通过 mkcert 命令来生成证书文件和私钥。示例如下:

image-20220507195616470

在上面的操作中,我们针对 localhost、127.0.0.1、192.168.101.263 个地址生成了证书文件和私钥,其中 ./localhost+2.pem 就是证书文件,./localhost+2-key.pem 就是私钥文件。并且这两个文件都有过期时间。

我们也可以打开生成证书的目录,可以看到在该目录下已经存在了这 2 个文件。

image-20220507195632327

二、在 live server 中配置 https 环境

因为我们的项目很多时候是以 live server 的形式打开,因此我们可以在 live server 中配置以 https 打开项目。

image-20220507195648343

在扩展中找到 live server 对应的配置项:

image-20220507195710916

enable 修改为 true,然后填写 certkey 的地址即可,填写完成后最好重启一下 vscode

image-20220507195729079

配置完成后,之后使用 live server 重新打开项目时,就会以 https 的形式来打开项目。

三、其他

其他环境中要配置 https,可以参阅:https://www.codingsky.com/m/doc/2021/8/24/116.html

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

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

相关文章

项目进度管理:常用项目管理工具推荐

工欲善其事必先利其器,借助项目管理工具可以帮助项目经理更好的管理项目,起到事半功倍的效果。 使用项目管理工具来管理项目,有助于事情的快速落地,提升做事效率,也能让事情做的更周到全面 选择项目管理工具时可以参…

通过几个基本概念说一下为什么openGauss是当下之选?

Database、Schema、User都是数据库的基本概念,SQL标准中也有明确规范。但不同数据库的具体实现也不尽相同,有些甚至大相径庭。这就导致用户在做国产化选型和数据库迁移时可能会遇到种种困难。本文从这几个基本概念展开,说说为什么openGauss系…

数据结构之进阶二叉树(二叉搜索树和AVL树、红黑树的实现)超详细解析,附实操图和搜索二叉树的实现过程图

绪论​ “生命有如铁砧,愈被敲打,愈能发出火花。——伽利略”;本章主要是数据结构 二叉树的进阶知识,若之前没学过二叉树建议看看这篇文章一篇掌握二叉树,本章的知识从浅到深的对搜索二叉树的使用进行了介绍和对其底层…

linux 内核的 lru_list 的结构

在linux的slab分配的入口slab_alloc有一个传入参数lru,它的作用是使每个slab对象在unused,但可能后面继续使用的时候,不需要free,可以先放在lru_list上。lru_list的结构为: struct list_lru {struct list_lru_node *n…

DiffUtil + RecyclerView 在 Kotlin中的使用

很惭愧, 做了多年的Android开发还没有使用过DiffUtil这样解放双手的工具。 文章目录 1 DiffUtil 用来解决什么问题?2 DiffUtil 是什么?3 DiffUtil的使用4 参考文章 1 DiffUtil 用来解决什么问题? List发生变化, 我们使用 RecyclerView.Adapter.notifyDataChanged很熟练了 …

WiFi+蓝牙物联网定制方案——五大核心难点

WiFi蓝牙物联网定制方案可以根据具体需求进行定制: 1、设备连接方案:采用WiFi和蓝牙技术,将物联网设备与智能手机、平板电脑等设备进行连接,实现数据传输和远程控制。 2、数据传输方案:通过WiFi和蓝牙技术,…

Vue表格中鼠标移入移出input显示隐藏 ,有输入值不再隐藏

Vue表格中鼠标移入移出input显示隐藏 , 不再隐藏的效果 <el-tableref"table":data"tableDatas"borderstyle"width: 100%":span-method"arraySpanMethod"id"table"row-key"id"cell-mouse-enter"editCell&q…

Laravel框架使用phpstudy本地安装的composer用Laravel 安装器进行安装搭建

一、首先需要安装Laravel 安装器 composer global require laravel/installer 二、安装器安装好后&#xff0c;可以使用如下命令创建项目 laravel new sys 三、本地运行 php artisan serve 四、 使用Composer快速安装Laravel5.8框架 安装指定版本的最新版本&#xff08;推荐&a…

C#合并多个Word文档(微软官方免费openxml接口)

g /// <summary>/// 合并多个word文档&#xff08;合并到第一文件&#xff09;/// </summary>/// <param name"as_word_paths">word文档完整路径</param>/// <param name"breakNewPage">true(默认值)&#xff0c;合并下一个…

Linux:ACL 权限控制

ACL 概述 ACL&#xff08;Access Control List&#xff09;&#xff0c;主要作用可以提供除属主、属组、其他人的 rwx 权限之外的 细节权限设定。 ACL 的权限控制 &#xff08;1&#xff09;使用者&#xff08;user&#xff09; &#xff08;2&#xff09;群组&#xff08;grou…

如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana|Part 1

本系列将分成三个部分&#xff0c;您将学习如何使用 Helm 在 Kubernetes 上集成 Prometheus 和 Grafana&#xff0c;以及如何在 Grafana 上创建一个简单的控制面板。Prometheus 和 Grafana 是 Kubernetes 最受欢迎的两种开源监控工具。学习如何使用 Helm 集成这两个工具&#x…

类和对象

1 类定义&#xff1a; class ChecksumAccumulator {// class definition goes here } 你就能创建 ChecksumAccumulator 对象&#xff1a;new CheckSumAccumulator 注&#xff1a;1scala类中成员默认是public类型&#xff0c;若设为私有属性则必须加private关键字。在scala中是…

NLP论文阅读记录 - | 使用 BRIO 训练范式进行抽象文本摘要

文章目录 前言0、论文摘要一、Introduction二.相关工作三.本文方法四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果标准抽象模型微调抽象模型微调抽象模型和 BRIO微调抽象模型和 BRIO-Loop 五 总结结论局限 前言 Abstractive Text Summarization Using th…

OpenCV | 告别人工目检:深度学习技术引领工业品缺陷检测新时代

文章目录 机器视觉缺陷检测工业上常见缺陷检测方法内容简介作者简介目录读者对象如何阅读本书获取方式 机器视觉 机器视觉是使用各种工业相机&#xff0c;结合传感器跟电气信号实现替代传统人工&#xff0c;完成对象识别、计数、测量、缺陷检测、引导定位与抓取等任务。其中工…

【项目问题解决】% sql注入问题

目录 【项目问题解决】% sql注入问题 1.问题描述2.问题原因3.解决思路4.解决方案1.前端限制传入特殊字符2.后端拦截特殊字符-正则表达式3.后端拦截特殊字符-拦截器 5.总结6.参考 文章所属专区 项目问题解决 1.问题描述 在处理接口入参的一些sql注入问题&#xff0c;虽然通过M…

flutter开发windows应用的库

一、window_manager 这个插件允许 Flutter 桌面应用调整窗口的大小和位置 地址&#xff1a;https://github.com/leanflutter/window_manager二、win32 一个包&#xff0c;它使用FFI包装了一些最常见的Win32 API调用&#xff0c;使Dart代码可以访问这些调用&#xff0c;而不需…

node.js mongoose index(索引)

目录 简介 索引类型 单索引 复合索引 文本索引 简介 在 Mongoose 中&#xff0c;索引&#xff08;Index&#xff09;是一种用于提高查询性能的数据结构&#xff0c;它可以加速对数据库中文档的检索操作 索引类型 单索引、复合索引、文本索引、多键索引、哈希索引、地理…

useConsole的封装,vue,react,htmlscript标签,通用

之前用了接近hack的方式实现了console的封装&#xff0c;目标是获取console.log函数的执行&#xff08;调用栈所在位置&#xff09;所在的代码行数。 例如以下代码&#xff0c;执行window.mylog(1)时候&#xff0c;console.log实际是在匿名的箭头函数()>{//这里执行的} con…

使用HTTP协议有哪些风险?HTTP与HTTPS的区别是什么

作为两种常见的网络协议&#xff0c;HTTP和HTTPS都是用于在浏览器和服务器之间传输数据的。然而在保障数据安全性方面&#xff0c;HTTPS远远优于HTTP。在网络安全愈发重要的当下&#xff0c;HTTP协议的不安全性使得其逐渐被淘汰弃用。那么使用HTTP协议有哪些风险呢&#xff1f;…

Backend - Django 项目创建 运行

目录 一、配置环境 二、创建 Django 项目 &#xff08;一&#xff09;新建文件夹 &#xff08;二&#xff09;打开文件夹 &#xff08;三&#xff09;打开运行终端 &#xff08;四&#xff09;创建基础项目 &#xff08;五&#xff09;创建app 1. 安装Django &#xf…