webpack dev server 和 https: 无法访问此站点

Question

我正在努力配置 https in webpack-dev-server 并提供自签名证书。

但它并没有多大帮助，因为我使用的是非官方端口 当我禁用 https.

时它工作正常

证书是通过powershell命令New-SelfSignedCertificate生成的，然后用Import-PfxCertificate

导入

可能证书格式不正确，因为当我在 Chrome 上查看站点信息时，状态是 与站点的连接不安全。

有什么想法吗？

感谢帮助

package.json

"devDependencies": {
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0",
}

webpack.config.js

 devServer: {
        hot: true,
        server: {
            type: "https",
            options: {
                pfx: "./localhost.pfx",
                passphrase: "abc123",
                requestCert: true,
            },
        },
        port: 9000,
        historyApiFallback: true,
    }

生成证书的工具


$dnsName = "localhost"
$expiry = [DateTime]::Now.AddYears(1);
$webDir = "$PSScriptRoot\ClientApp";
$fileName = "localhost.pfx";
$passwordText = "abc123";
$name = "Test App";

Write-Host "Creating cert directly into CurrentUser\My store"

$certificate = New-SelfSignedCertificate `
    -CertStoreLocation Cert:\CurrentUser\My `
    -Subject $name `
    -FriendlyName $name `
    -DnsName $dnsName `
    -NotAfter $expiry

$certFile = Join-Path $webdir $fileName

Write-Host "Exporting certificate to $certFile"

$password = ConvertTo-SecureString `
    -String $passwordText `
    -Force -AsPlainText

Export-PfxCertificate `
    -Cert $certificate `
    -FilePath $certFile `
    -Password $password | Out-Null

Write-Host "Importing $certFile to CurrentUser\Root store for immediate system wide trust"

Import-PfxCertificate `
    -FilePath $certFile `
    -CertStoreLocation Cert:\LocalMachine\Root `
    -Password $password | Out-Null

Answer 1

requestCert 选项导致了问题。当我删除它时，它就像一个魅力。

webpack dev server 和 https: 无法访问此站点

webpack dev server and https: This site can’t be reached

powershell

webpack-dev-server