How can I proxy to a ssl endpoint with the webpack-dev-server proxy

Question

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.

Thanks for the `changeOrigin: true` solution! – alecdwm Dec 19 '16 at 10:14 — alecdwm, Dec 19 '16 at 10:14

score 7 · Accepted Answer · answered Feb 28 '16 at 20:10

7

        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.

answered Feb 28 '16 at 20:10

Steffen Ullrich

114,247
10
131
172

Yes, thnx. Still not working. I have updated my questtion. – voscausa Feb 28 '16 at 22:50
@voscausa: the error message clearly says what the problem is: the certificate is for `*.appspot.com, ...` but you are accessing it with the name `localhost`. Since the name you use does not match the names in the certificate the certificate can not be validated. – Steffen Ullrich Feb 29 '16 at 04:41
1

OK. Thnx again. I found an option to change the origing and SOLVED. I have updated my Question with the option. – voscausa Feb 29 '16 at 05:09

score 2 · Answer 2 · answered Nov 29 '17 at 02:46

2

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.

answered Nov 29 '17 at 02:46

mytharcher

742
7
18

How can I proxy to a ssl endpoint with the webpack-dev-server proxy

2 Answers2