When I try to proxy this http://localhost:9000/rpc request, I receive:

cannot proxy to :80 
  (write EPROTO  101057795:error:140770FC:SSL routines:
  SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c:794:)

webpack-dev-derver config:

devServer: {
    contentBase: "./",
    hostname: 'localhost',
    port: 9000,
    proxy: {
        '/rpc': {
            target: '',
            secure: false,
            changeOrigin: true     // **Update-2 SOLVED**
        }
    }
}

I use fetch : fetch('/rpc' ... to make the request and Windows 10 professional to run webpack.

Without the proxy : fetch('' ... the SSL request works fine.

Update. I had to use the SSL port 443 (see the answer of Steffen).
Now using: :443

But still not working with secure: true. The console log shows:

cannot proxy to :443 
(Hostname/IP doesn't match certificate's altnames: "Host: localhost. 
is not in the cert's altnames: DNS:*.appspot, DNS:*.thinkwithgoogle,
DNS:*.withgoogle, DNS:*.withyoutube, DNS:appspot,
DNS:thinkwithgoogle, DNS:withgoogle, DNS:withyoutube")

And with secure: false. The console reports: 404 (Not Found)

Update: SOLVED using changeOrigin: true. Docs here.

When I try to proxy this http://localhost:9000/rpc request, I receive:

cannot proxy to https://example.appspot.com:80 
  (write EPROTO  101057795:error:140770FC:SSL routines:
  SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c:794:)

webpack-dev-derver config:

devServer: {
    contentBase: "./",
    hostname: 'localhost',
    port: 9000,
    proxy: {
        '/rpc': {
            target: 'https://example.appspot.com',
            secure: false,
            changeOrigin: true     // **Update-2 SOLVED**
        }
    }
}

I use fetch : fetch('/rpc' ... to make the request and Windows 10 professional to run webpack.

Without the proxy : fetch('https://example.com/rpc' ... the SSL request works fine.

Update. I had to use the SSL port 443 (see the answer of Steffen).
Now using: https://example.appspot.com:443

But still not working with secure: true. The console log shows:

cannot proxy to https://example.appspot.com:443 
(Hostname/IP doesn't match certificate's altnames: "Host: localhost. 
is not in the cert's altnames: DNS:*.appspot.com, DNS:*.thinkwithgoogle.com,
DNS:*.withgoogle.com, DNS:*.withyoutube.com, DNS:appspot.com,
DNS:thinkwithgoogle.com, DNS:withgoogle.com, DNS:withyoutube.com")

And with secure: false. The console reports: 404 (Not Found)

Update: SOLVED using changeOrigin: true. Docs here.

• javascript
• ssl
• proxy
• webpack
• webpack-dev-server

• 2 Thanks for the changeOrigin: true solution! – alecdwm Commented Dec 19, 2016 at 10:14

2 Answers 2

        target: 'https://example.com:80',

It is very unlikely that port 80 is used for HTTPS. Usually port 443 is used

SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c:794:)

It is very likely that the server at port 80 did not reply with HTTPS but with some HTTP error because the message from the client was the start of a TLS handshake and not the expected HTTP request. But the client expected the reply to the TLS handshake and not a HTTP error. That's why you get this error.

Without the proxy : fetch('https://example.com/rpc' ... the SSL request works fine.

That's because you use in this case https://example.com and not https://example.com:80. Because you don't give an explicit port it will use the default port for https, i.e. 443.

While I am using the correct config with changeOrigin: true etc., but still meet 301 and option request, and can't reach the real backend server. Till I try to clean the browser cache, it works correctly.