如何通过 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 说设置 [=15= 时使用的证书] 到 true 不是来自有效的 CA（也许是在后台进行的某种自签名的事情？）

我该如何解决这个问题？通过 "Let's Encrypt" 生成证书可能是可行的方法吗？

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

Answer 1

不太确定你的 webpack 配置是什么，但我的 build 文件夹中有一个 dev-server.js 文件。为了使 https 在本地计算机上工作，我必须用以下代码替换行 const server = app.listen(port)：

const https = require('https');
const fs = require('fs');
const options = {
  key: fs.readFileSync('./certs/server.key'),
  cert: fs.readFileSync('./certs/server.cert')
}
const server = https.createServer(options, app).listen(port);

请注意，您可能需要更改证书的路径。

同时将 const uri = 'http://localhost:' + port 更改为 const uri = 'https://localhost:' + port

Answer 2

LEts Encrypt 帮我解决了。我刚刚为我的本地主机生成了一个证书，并将其添加到 gitignore 和 snap。错误消失了。试试这个：https://letsencrypt.org/docs/certificates-for-localhost/

Answer 3

转到 Chrome 控制台中的 network 选项卡。

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

接受无效证书的豁免

Answer 4

您可以使用 mkcert https://github.com/FiloSottile/mkcert

它会为你的本地主机创建一个假的 CA 证书，你可以配置你的本地服务器来使用它

Answer 5

我最后做的是创建一个 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')),
  },
},

用脚本来做这件事很好，这样可能不熟悉这类加密内容的团队成员就不必深入研究细节，可以直接开始编写代码了！

Answer 6

只要您至少拥有自签名证书和密钥，那么您所要做的就是运行命令“npm 运行 serve --https”

Answer 7

只需将其添加到您的 vue.config.js

module.exports = {
  ...
  devServer: {
    https: true
  }
}

如何通过 HTTPS 服务 Vue 应用程序以进行本地开发

How to serve a Vue application over HTTPS for local development

https

self-signed

vue.js

tls1.2