Webpack DevServer -> proxy HTTPS resource -> UNABLE_TO_VERIFY_LEAF_SIGNATURE

Question

I'm using Webpack DevServer with the following settings:

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

It has worked fine with HTTP but when I'm now switching my proxy to HTTPS I start getting errors.

Got the following message in command prompt:

[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)

I have tried to set Node NODE_TLS_REJECT_UNAUTHORIZED to 0 but this does not help.

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

Is there some way that I can access the generated certificates CA and add this to Trusted Root Certification Authorities? Will this help or do I need to change other things as well?

If I switch https to true I get the same error.

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)

When I access the desired resource in Chrome I also get the following error:

Update:

I have now set webpack-dev-server to use the same certificate as my original web server (https://localhost:44369) does. I have verified that the Thumbprint and Serial number are identical between the two.

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'

I also tried with injecting the certificate with ssl-root-cas but I still get the same error.

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

Tried this as well:

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

Spent way to much time for this when in the end it was so easy. It worked by setting secure to false for proxy and then accessing webpack-dev-server via http.

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,
}