带有用于https域的NGINX proxy_pass的Webpack开发服务器，原因:net :: ERR_CONNECTION_CLOSED [英] Webpack Dev Server with NGINX proxy_pass for https domain causes: net::ERR_CONNECTION_CLOSED

问题描述

我已经设置了一个服务器，该服务器为前端和nodejs后端托管一个"angular2-webpack-starter"项目. Nginx默认具有两个proxy_pass来将连接映射到服务器上的正确位置.几乎一切都按预期工作..但是sockjs-node/info代理存在问题，这确实让我感到惊讶.

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.

运行时，我看到:

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

两个代理是:

  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";
  }

我已经查看了该问题的其他答案，但无济于事.我尝试在前端添加cors东西，这没有任何意义，并且没有任何效果.我尝试关闭proxy_buffering无济于事(正如我期望的那样).我什至还添加了"underscored_in_headers;"在nginx中，无济于事.

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.

其他人已经使用webpack-dev-server进行代理，但是似乎nginx应该可以轻松处理此问题，并且当我在没有webpack-dev-server的情况下进入生产环境时，也会遇到同样的问题.

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.

推荐答案

花了很长时间，但我发现了问题所在.在开发过程中尝试在安全站点上运行时，其他人可能会受益.

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

问题是proxy_pass传递到" http://127.0.0.1:3000/".这会导致问题.

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

更改为:

proxy_pass https://127.0.0.1:3000/;

proxy_pass https://127.0.0.1:3000/;

并将webpack.dev.js中的devServer设置为:

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

解决了问题.注意:https:true就足够了，但是我想使连接尽可能地被接受，因此我添加了密钥，cert，ca内容.

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.

您仍然会看到:

在我的情况下:

由于与" https://localhost:3000 的连接仍然与域名不匹配. IE.本地主机！== parke.dynazu.com.但是一切正常，当我离开webpack-dev-server时，这将不是问题.

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.

这篇关于带有用于https域的NGINX proxy_pass的Webpack开发服务器，原因:net :: ERR_CONNECTION_CLOSED的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！