我正在使用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_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
答案 0 :(得分:4)
为此付出了很多时间,最终它变得如此简单。它的工作原理是将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,
}