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]尝试将请求/从localhost：8080代理到https：// localhost：44369 （UNABLE_TO_VERIFY_LEAF_SIGNATURE）（https://nodejs.org/api/errors.html#errors_common_system_errors）时发生错误

我试图将Node设置NODE_TLS_REJECT_UNAUTHORIZED为，0但这无济于事。

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

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

如果我切换https到true相同的错误。

生成SSL证书

...

[HPM]尝试将请求/从localhost：8080代理到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/#devserver-proxy

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