前端开发本地环境如何配置https

415 阅读2分钟

1.HTTP

在说 HTTPS 之前,我们先要了解 HTTP,因为 HTTP 是 HTTPS 通讯的基础。 HTTP(HyperText Transport Protocol)超文本传输协议,它用于传输客户端和服务器端的数据。 HTTP 使用很简单也很方便,但却存在以下 3 个致命问题:

使用明文通讯,内容可以被窃听。 不验证通讯方的真实身份,可能会遭到伪装。 无法证明报文的完整性,很容易被篡改。 鉴于以上问题,所以现在的系统会使用 HTTPS 来替代 HTTP。

2.HTTPS

首先来说,HTTPS 并不是一种新的协议,而是在 HTTP 协议的基础上添加了加密机制 SSL(Secure Socket Layer)或 TLS(Transport Layer Security)。 HTTPS = HTTP + 加密 + 认证 + 完整性保护。

SSL 和 TLS

SSL(Secure Socket Layer)最早是由浏览器开发厂商网景公司开发的,此公司开发了 SSL 3.0 及 3.0 之前的版本,之后便将 SSL 交给了 IETF(Internet Engineering Task Force)Internet 工程任务组的手中,IETF 以 SSL 3.0 为基础开发了 TLS 1.0,所以可以认为 TLS 是 SSL 的“新版本”。

在前端开发中,有一些方法和事件,需要https链接访问,才能获取到权限,这是为了安全和隐私的考虑,所以需要配置HTTPS 开发服务器

步骤

1. 使用 HTTPS 开发服务器

在本地开发环境中使用 HTTPS 服务器,可以通过以下方式实现:

使用 http-server 和 mkcert(Node.js 环境)

  1. 安装 http-server
npm install -g http-server
  1. 安装 mkcert(用于生成自签名证书):
brew install mkcert
mkcert -install

注:(遇到 Homebrew 安装 mkcert 时出现权限问题,可以通过修改 /usr/local 目录的权限来解决。以下是详细步骤:)

sudo chown -R $(whoami) /usr/local

重新尝试安装 mkcert

3. 生成证书

cd /Users/[项目跟目录]
mkcert -key-file localhost-key.pem -cert-file localhost.pem localhost 127.0.0.1 ::1
  1. 使用 http-server 启动 HTTPS 服务器
http-server -S -C localhost.pem -K localhost-key.pem