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（也许是在后台进行某种自签名的事情？）

我该如何解决？通过“让我们加密”生成证书是否可能呢？

另一方面，我还使用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在本地计算机上工作，我必须用以下代码替换行000F0138 44 24 0C 74 │ 63 48 8D BC │：

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

Answer 2

让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

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

Answer 6

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

df1 <- structure(list(A = c("x", "x", "x", "y", "y"), B = c("m", "n", 
"o", "m", "o"), C = c(2L, 3L, 11L, 5L, 8L)), class = "data.frame", 
row.names = c("1", 
"2", "3", "4", "5"))

基本上，您创建一个根CA，并让它对您的证书进行签名。

注意：如果您不在macOS上，则必须修改“安全性添加信任证书”步骤。此步骤将其添加到macOS钥匙串中。

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包含：

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

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

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

拥有脚本可以很好地做到这一点，这样，可能不熟悉这种加密货币的团队成员就不必过多地研究细节，而可以开始编写代码！

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

6 个答案: