如何通过 HTTPS 为 Vue 应用程序提供本地开发服务

Question

在进行本地开发时，我需要通过 HTTPS 为 vue 应用程序提供服务。

该应用程序正在提供：npm run serve它运行：vue-cli-service serve

我试图创建一个vue.config.js文件并向其中添加以下内容：

module.exports = {
    devServer: {
        port: 8080,
        https: true,
    }
}

这导致控制台错误在Chrome V75，如以下情况：GET https://192.168.0.71:8080/sockjs-node/info?t=1564339649757 net::ERR_CERT_AUTHORITY_INVALID我猜这是Chrome的说，设置时使用的证书https来true是不是从一个有效的CA（也许是某种形式的自签名的东西在后台要去？）

我怎样才能解决这个问题？通过“让我们加密”生成证书可能是要走的路吗？

另一方面，我还使用 生成了一个根 CA 私钥，openssl genrsa -des3 -out rootCA.key 2048并使用 生成了一个自签名证书openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem，但我不确定如何告诉vue-cli-service尝试使用这些。但是，如果自签名证书ERR_CERT_AUTHORITY_INVALID在 Chrome 中导致错误，那么追求这条路线就没有多大意义

Answer 1

转到networkChrome 控制台中的标签页。

双击失败https://192.168.0.71:8080/sockjs-node/info?t=1564339649757（在新选项卡中打开）

接受无效证书的豁免

Answer 2

我最终做的是创建一个 shell 脚本，其中包含以下内容：

echo "Started local certificate setup script."
openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 825 -out rootCA.pem
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config server.csr.cnf
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 825 -sha256 -extfile v3.ext
echo "Trust the certificate (add it to the system keychain): "
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain rootCA.pem

基本上，您创建一个根 CA 并让它签署您的证书。

注意：如果您不在 macOS 上，则必须修改“security add-trusted-cert”步骤。此步骤将其添加到 macOS 钥匙串。

v3.ext包含：

authorityKeyIdentifier = keyid, issuer
basicConstraints = CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost

server.csr.cnf包含：

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

[dn]
C=CA
ST=RandomProvince
L=RandomCity
O=RandomOrg
OU=RandomOrgUnit
emailAddress=admin@somedomain.com
CN = localhost

如果您将其包含在您的项目中，那么您可能还需要将以下条目添加到.gitignore：

*.key
*.srl
*.csr
*.pem
*.crt

在我的配置文件（我现在使用 nuxt.js）中，我有以下内容：

server: {
  port: 7000,
  host: 'localhost',
  timing: false,
  https: {
    // these files are generated by running the above shell script
    key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
    cert: fs.readFileSync(path.resolve(__dirname, 'server.crt')),
  },
},

有一个脚本来做这件事很好，这样可能不熟悉此类加密内容的团队成员就不必深入研究细节，只需开始编写代码即可！