Webpack Dev Server with NGINX proxy_pass for https

Question

I have setup a server which hosts an 'angular2-webpack-starter' project for the front-end and a nodejs back-end. The nginx default has two proxy_pass's to map the connections to the right places on the server. ALMOST everything works as expected.. BUT there is an issue with the proxy of sockjs-node/info which truly surprised me.

When running I see:

zone.js:1960 GET https://localhost:3000/sockjs-node/info?t=1490740454197 net::ERR_CONNECTION_CLOSED

The two proxies are:

  location ^~ /server/ {
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   Host      $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass https://127.0.0.1:9000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  location ^~ / {
    #proxy_buffering    off;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   Host      $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://127.0.0.1:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

I have looked over serveral other answers to this issue, to no avail. I tried adding cors stuff on the front-end which makes no sense and this has no effect. I tried turning off proxy_buffering to no avail (as I would expect). I even added 'underscored_in_headers on;' in nginx, to no avail.

Others have used the webpack-dev-server to do the proxy, but it seems that nginx should handle this easily and when I move to production without the webpack-dev-server I will have the same issue.

If you have encountered this issue, or have an idea, your help would be greatly appreciated.

Answer 1

It took quite a while, but I figured out the issue. Others may benefit when attempting to run on a secure site during development.

The issue was proxy_pass to 'http://127.0.0.1:3000/'. This causes issues.

Changing to:

proxy_pass https://127.0.0.1:3000/;

AND setting devServer in webpack.dev.js to:

  https: true,
  https: {
    key: fs.readFileSync('/etc/apache2/certwork/xxx.key'),
    cert: fs.readFileSync('/etc/apache2/certwork/xxx.crt'),
    ca: fs.readFileSync('/etc/apache2/certwork/ssl-bundle.crt')
  },

solved the issue. NOTE: https: true is enough, but I wanted to make the connection as accepted as possible, hence I added the key, cert, ca stuff.

YOU will still see:

And in my case:

Since the connection to 'https://localhost:3000' still has a mismatch with the domain name. IE. localhost !== parke.dynazu.com. BUT all is working and when I move away from the webpack-dev-server, this will not be an issue.