本地站点开启https

线上环境开启https请移步 给站点开启https和http2

本文这里要说的是如何在本地环境搭建https,至于说有什么用,假如你找到这了, 就说明你已经用到了.
Chrome NET::ERR_CERT_COMMON_NAME_INVALID

虽然你配置了本地的证书,但是总是本地证书被拒绝的,原因是Chrome已经弃用了对证书中commonName匹配的支持，实际上，自2017年1月起需要一个subjectAltName。

解决方案

使用OpenSSL生成所有证书。

第1步：根SSL证书

第一步是创建根安全套接字层（SSL）证书。然后，可以使用此根证书对可能为各个域生成的任意数量的证书进行签名。

生成RSA-2048密钥并将其保存到文件中rootCA.key。此文件将用作生成根SSL证书的密钥。系统将提示您输入密码，每次使用此特定密钥生成证书时都需要输入密码。

openssl genrsa -des3 -out rootCA.key 2048

您可以使用生成的密钥创建新的Root SSL证书。将其保存到名为的文件中rootCA.pem。该证书的有效期为1,024天。随意将其更改为您想要的任意天数。系统还会提示您输入其他可选信息。

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

第2步：信任根SSL证书

在您可以使用新创建的根SSL证书开始颁发域证书之前，还有一个步骤。您需要告诉您的Mac信任您的根证书，以便它所发布的所有单个证书也是可信的。

在Mac上打开Keychain Access，然后转到系统钥匙串中的“证书”类别。在那里，导入rootCA.pem使用文件>导入项目。双击导入的证书，并在“ 信任”部分中将“使用此证书时：”下拉列表更改为“ 始终信任 ” 。

如果您已按照说明正确操作，那么您的证书应该在Keychain Access中看起来像这样。

第2步：域SSL证书

根SSL证书现在可用于专门为您所在的本地开发环境颁发证书localhost。

创建新的OpenSSL配置文件，server.csr.cnf ,把以下内容粘贴进去,以便在创建证书时导入这些设置，注意不是在命令行中输入它们。

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

创建v3.ext文件,复制以下内容粘贴进入, 以创建X509 v3证书。请注意在subjectAltName这里指定的方式

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

创建证书密钥以localhost使用存储的配置设置server.csr.cnf。该密钥存储在server.key。

openssl req -new -sha256 -nodes -out server.csr -newkey rsa：2048 -keyout server.key -config <（cat server.csr.cnf）

证书签名请求是通过我们之前创建的根SSL证书发出的，用于创建域证书localhost。输出是一个名为的证书文件server.crt。

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

使用新的SSL证书

您现在已准备好localhost使用HTTPS 保护您的安全。将server.key和server.crt文件移动到服务器上的可访问位置，并在启动服务器时包含它们。

Node中的使用

var path = require('path')
var fs = require('fs')
var express = require('express')
var https = require('https')

var certOptions = {
  key: fs.readFileSync(path.resolve('build/cert/server.key')),
  cert: fs.readFileSync(path.resolve('build/cert/server.crt'))
}

var app = express()

var server = https.createServer(certOptions, app).listen(443)

devServer中的使用

const fs = require('fs')
const path = require('path');

devServer: {
    // http2: true, //这里可以开启http2
    https: {
        key: fs.readFileSync(path.join(__dirname + "/server.key")),
        cert: fs.readFileSync(path.join(__dirname + "/server.crt")),
        ca: fs.readFileSync(path.join(__dirname + "/rootCA.pem")),
    },
    ....
}

使用脚本一步到位

假如你是懒癌, 或者怕敲错代码,而导致无法完成https配置. 可以使用脚本.

一键生成证书脚本

1. 克隆库,cd 进入目录

git clone https://gitee.com/chuchur/local-cert-generator.git
cd local-cert-generator

2. 运行脚本以创建根证书：

sh createRootCA.sh

3 . 将刚刚生成的根证书添加到可信证书列表中。此步骤取决于您运行的操作系统：

macOS：打开Keychain Access并将根证书导入您的系统钥匙串。然后将证书标记为受信任。

注意：您可能需要重新启动浏览器才能正确加载新受信任的根证书。

4.运行脚本以创建域证书localhost：

sh createSelfSigned.sh

5. 拷贝server.key和server.crt 到项目对应的目录 在相关配置启用即可