使用NGINX proxy_pass代理https域名的Webpack Dev Server导致：net::ERR_CONNECTION_CLOSED

Question

我已经设置了一个服务器，用于托管前端的“angular2-webpack-starter”项目和后端的nodejs。nginx默认有两个proxy_pass，将连接映射到服务器上的正确位置。几乎所有的东西都按预期工作...但是，在代理sockjs-node/info时出现了问题，这真的让我感到惊讶。

运行时我看到：

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，但也没有用（正如我所预料的）。我甚至在nginx中添加了'underscored_in_headers on;'，但也无济于事。

其他人使用webpack-dev-server来代理，但似乎nginx应该可以轻松处理这个问题，当我在没有webpack-dev-server的情况下转移到生产环境时，我将遇到相同的问题。

如果您遇到过这个问题或有想法，请帮忙解决，非常感谢！

- JoelParke

Answer 1

我花了一些时间，但我找到了问题所在。其他人在开发时运行安全站点时可能会受益。

问题出在代理到'http://127.0.0.1:3000/'上。 这会导致问题。

更改为:

proxy_pass https://127.0.0.1:3000/;

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

  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就足够了，但我想让连接尽可能被接受，因此我添加了key、cert、ca的东西。

您仍然会看到：

在我的情况下：

由于连接到 'https://localhost:3000' 仍然与域名不匹配。即，localhost !== parke.dynazu.com。 但一切都正常工作，当我离开webpack-dev-server时，这将不再是一个问题。

- JoelParke