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

score 47 · Accepted Answer · edited Sep 15 '20 at 21:48

47

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

edited Sep 15 '20 at 21:48

McFizz

3,013
3
18
26

answered Feb 05 '18 at 14:18

Ogglas

62,132
37
328
418

2

Great solution! This configuration is the quickest path to victory for most dev environments, imho. – Mark Jan 14 '19 at 17:35
I get a 403 forbidden after the 101 socket upgrade. Any ideas on what I am missing? – Michael Aug 24 '23 at 16:50

score 1 · Answer 2 · answered Mar 30 '23 at 11:55

In my case using secure: false was not enough to make the error go away. If you are using a Name-based virtual host you might need to set changeOrigin to true for not keeping the origin of the host header.

devServer: {
    proxy: {
        '/path': {
            target: 'https://backend-server',
            secure: true,
            changeOrigin: true // <-
        }
    },
    ...
}

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

Webpack DevServer -> proxy HTTPS resource -> UNABLE_TO_VERIFY_LEAF_SIGNATURE

2 Answers2