配置https环境

news2024/11/16 13:24:59

为什么要配置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.coloradmin.cn/o/1323391.html

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

相关文章

网络安全事件频发现状

近日,腾讯视频、菜鸟、滴滴等App崩溃的消息登上热搜,引发不少网友热议。今年以来,已有多起App崩溃事件发生,甚至有企业因此业绩损失超亿元。互联网应用的系统安全和稳定性建设越来越被社会广泛关注。 12月3日晚,有网友…

node.js mongoose Aggregate介绍

目录 简述 Aggregate的原型方法 aggregate进行操作 简述 在 Mongoose 中,Aggregate 是用于执行 MongoDB 聚合操作的类。MongoDB 聚合操作是一种强大的数据处理工具,可以用于对集合中的文档进行变换和计算 通过Model.aggregate创建一个aggregate(Agg…

硬件产品经理:硬件产品敏捷开发

目录 简介 敏捷 CSDN学院 作者简介 简介 之所以敏捷产品开发流程会越来越普遍。 主要得益于这个方法可以让企业使用更少的资源去开发出令客户满意的新产品。 敏捷开发强调的最重要的一点就是“快”。 也就是要求通过快速迭代来获取频繁的客户反馈。 这就特别适合应对市…

Android-高效加载大图

Android 高效加载大图 前言读取位图尺寸和类型将按比例缩小的版本加载到内存中 前言 图片有各种形状和大小。在很多情况下,它们的大小超过了典型应用界面的要求。例如,系统“图库”应用会显示使用 Android 设备的相机拍摄的照片,这些照片的分…

制作一个简单 的maven plugin

流程 首先&#xff0c; 你需要创建一个Maven项目&#xff0c;推荐用idea 创建项目 会自动配置插件 pom.xml文件中添加以下配置&#xff1a; <project> <!-- 项目的基本信息 --> <groupId>com.example</groupId> <artifactId>my-maven-plugi…

中国500米逐年植被净初级生产力(NPP)数据集(2000-2022)

中国500米逐年植被净初级生产力&#xff08;NPP&#xff09;数据集&#xff08;2000-2022&#xff09; 净初级生产力(NPP)是指植物在单位时间单位面积上由光合作用产生的有机物质总量中扣除自养呼吸后的剩余部分&#xff0c;是生产者能用于生长、发育和繁殖的能量值&#xff0c…

UCloud + 宝塔 + PHP = 个人网站

UCloud 宝塔 PHP 个人网站 文章目录 1.概要2.UCloud使用教程&#xff08;租用云端服务器&#xff09;3.宝塔使用教程&#xff08;免费服务器运维面板&#xff09;4.总结 1.概要 今天主要是想教大家如何将在网络上白嫖到源码&#xff08;特指PHP源码!!!&#xff09;搭建运行…

Linux安全之SELinux理解

安全增强式 Linux&#xff0c;即SELinux(Security-Enhanced Linux)是一个 Linux 内核的安全模块&#xff0c;其提供了访问控制安全策略机制&#xff0c;包括了强制访问控制(Mandatory Access Control&#xff0c;MAC)。SELinux 是一组内核修改和用户空间工具&#xff0c;已经被…

【matlab】渐变填充曲线

【matlab】渐变填充曲线 clear;clc;close all; n4; x0:n*pi/499:n*pi; ysin(x); % 颜色包 for nm2:69 CMload([D:\matlab_w…

力扣 面试经典150算法题

1合并两个有序数组88. 合并两个有序数组-CSDN博客简单23

Vue的脚手架

脚手架配置 脚手架文档&#xff1a;Vue CLI npm config set registry https://registry.npm.taobao.org vue.config.js配置选项&#xff1a; 配置参考 | Vue CLI ref选项 ref和id类似&#xff0c;给标签打标识。 document.getElementById(btn); this.$ref.btn; 父子组…

【数据结构】树状数组算法总结

知识概览 树状数组有两个作用&#xff1a; 快速求前缀和 时间复杂度O(log(n))修改某一个数 时间复杂度O(log(n)) 例题展示 1. 单点修改&#xff0c;区间查询 题目链接 活动 - AcWing本活动组织刷《算法竞赛进阶指南》&#xff0c;系统学习各种编程算法。主要面向…

docker中如何使用Arthas

docker中如何使用Arthas 一、操作步骤1、首先拷贝arthas包下来&#xff1a;2、其次选中你需要查看的容器ID&#xff1a;3、拷贝arthas程序包到容器目录下&#xff1a;4、进入到容器目录5、进入到第3步映射到容器的路径&#xff0c;并使用ll查看是否存在 arthas-boot.jar6、使用…

阶段十-springsecurity总结

jwt认证流程 SpringSecurity 认证过程 第一步&#xff1a; 创建一个类实现UserDetailsService接口&#xff0c;重写其中的方法 通过重写 public UserDetails loadUserByUsername(String username) 方法 从数据库校验用户输入的用户名 配置SecurityConfig Bean注入 Passwor…

用GMAT进行卫星轨道仿真

文章目录 设计飞行器预报模型配置轨道图配置预报命令运行和分析 GMAT是一跨开源轨道设计软件&#xff0c;官网挂着NASA的名字&#xff0c;看上去十分给力。 下载之后直接解压&#xff0c;可执行文件在bin目录下&#xff0c;双击GMAT.exe&#xff0c;就可以进入其欢迎界面了。G…

网络编程day4

#include<myhead.h> int task_download(int client_fd,struct sockaddr_in serve_info) {//定义变量存储下载请求包char buf[516] "";//定义变量存储文件名char filename[40] "";printf("请输入文件名&#xff1a;");scanf("%s&quo…

scrapy快加构造并发送请求

scrapy数据建模与请求 学习目标&#xff1a; 应用 在scrapy项目中进行建模应用 构造Request对象&#xff0c;并发送请求应用 利用meta参数在不同的解析函数中传递数据 1. 数据建模 通常在做项目的过程中&#xff0c;在items.py中进行数据建模 1.1 为什么建模 定义item即提前…

PDA智能巡检系统

PDA智能巡检系统是一种基于便携式数字助理&#xff08;PDA&#xff09;设备的智能化巡检管理系统。它利用PDA设备的便携性和智能化特点&#xff0c;结合巡检管理软件和相关技术&#xff0c;实现对设备、设施或场所的全面巡检和管理。在日常巡检、设备巡检、设备点检中发挥着积极…

Maven仓库上传jar和mvn命令汇总

目录 导入远程仓库 命令结构 命令解释 项目pom 输入执行 本地仓库导入 命令格式 命令解释 Maven命令汇总 mvn 参数 mvn常用命令 web项目相关命令 导入远程仓库 命令结构 mvn deploy:deploy-file -Dfilejar包完整名称 -DgroupIdpom文件中引用的groupId名 -Dartifa…

中小型企业网络综合实战案例分享

实验背景 某公司总部在厦门&#xff0c;北京、上海都有分部&#xff0c;网络结构如图所示&#xff1a; 一、网络连接描述&#xff1a; 厦门总部&#xff1a;内部网络使用SW1、SW2、SW3三台交换机&#xff0c;SW1为作为核心交换机&#xff0c;SW2、SW3作为接入层交换机&#x…