Webpack DevServer -> 代理 HTTPS 资源 -> UNABLE_TO_VERIFY_LEAF_SIGNATURE

Question

我正在使用具有以下设置的 Webpack DevServer：

devServer: {
    proxy: {
        '*': {
            target: 'https://localhost:44369',
            secure: true
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    https: false
}

https://webpack.js.org/configuration/dev-server/#devserver-https

它在 HTTP 上运行良好，但是当我现在将我的代理切换到 HTTPS 时，我开始出现错误。

在命令提示符中收到以下消息：

[HPM] Error occurred while trying to proxy request / from localhost:8080 to https://localhost:44369 (UNABLE_TO_VERIFY_LEAF_SIGNATURE) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我尝试将节点 NODE_TLS_REJECT_UNAUTHORIZED 设置为 0 但这没有帮助。

new webpack.DefinePlugin({
    'process.env.NODE_TLS_REJECT_UNAUTHORIZED': 0
})

有什么方法可以访问生成的证书 CA 并将其添加到受信任的根证书颁发机构？这会有帮助还是我还需要更改其他内容？

如果我将 https 切换为 true，我会得到同样的错误。

Generating SSL Certificate

...

[HPM] Error occurred while trying to proxy request / from localhost:8080 to https://localhost:44369 (UNABLE_TO_VERIFY_LEAF_SIGNATURE) (https://nodejs.org/api/errors.html#errors_common_system_errors)

当我访问 Chrome 中所需的资源时，我也收到以下错误：

更新：

我现在已将 webpack-dev-server 设置为使用与我的原始 Web 服务器 (https://localhost:44369) 相同的证书。我已经验证 Thumbprint 和 Serial number 在两者之间是相同的。

https://webpack.js.org/configuration/dev-server/#devserver-pfx

https: true,
pfx: fs.readFileSync(path.resolve(__dirname, "../Client.WebProxy/App_Data/Certificate/") + '\localhost.pfx'),
pfxPassphrase: 'securePassword'

我也尝试过使用 ssl-root-cas 注入证书，但我仍然遇到同样的错误。

var sslRootCAs = require('ssl-root-cas/latest')
sslRootCAs.inject();

也试过这个：

target: 'https://[::1]:44369',

https://github.com/saikat/react-apollo-starter-kit/issues/20#issuecomment-316651403

var rootCas = require('ssl-root-cas/latest').create();
rootCas.addFile(path.resolve(__dirname, "../Client.WebProxy/App_Data/Certificate/") + '\localhost.pem');
require('https').globalAgent.options.ca = rootCas;

https://www.npmjs.com/package/ssl-root-cas

https: {
    key: fs.readFileSync(path.resolve(__dirname, "../Client.WebProxy/App_Data/Certificate/") + '\localhost.key'),
    cert: fs.readFileSync(path.resolve(__dirname, "../Client.WebProxy/App_Data/Certificate/") + '\localhost.crt'),
    ca: fs.readFileSync(path.resolve(__dirname, "../Client.WebProxy/App_Data/Certificate/") + '\localhost.pem'),
}

https://webpack.js.org/configuration/dev-server/#devserver-https

Answer 1

花了很多时间做这个，最后还是这么简单。它通过将代理的 secure 设置为 false 然后通过 http.

访问 webpack-dev-server 来工作

https://webpack.js.org/configuration/dev-server/#devserverproxy

devServer: {
    proxy: {
        '*': {
            target: 'https://localhost:44369',
            secure: false
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
}

Webpack DevServer -> 代理 HTTPS 资源 -> UNABLE_TO_VERIFY_LEAF_SIGNATURE

Webpack DevServer -> proxy HTTPS resource -> UNABLE_TO_VERIFY_LEAF_SIGNATURE

https

proxy

node.js

webpack

webpack-dev-server