Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack Dev Server with NGINX proxy_pass for https domain causes: net::ERR_CONNECTION_CLOSED

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.

like image 481
JoelParke Avatar asked Feb 04 '23 18:02

JoelParke


1 Answers

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:

enter image description here

And in my case:

enter image description here

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.

like image 95
JoelParke Avatar answered Feb 07 '23 09:02

JoelParke