javascript - Angular websocket 无法在生产环境中与 Azure VM nginx 配合使用，但可以在本地使用

Question

我在这个问题上花费了几乎整整一周的时间后才发布此内容，但我无法解决该问题。

我正在尝试将客户端作为 Angular 应用程序实现通知服务，并且我的后端位于 NodeJS - NestJS 框架中。我有一个使用 Nginx 在 Azure 上运行的 VM 服务器。

它在我的本地运行良好，但是当我将代码部署到服务器时，我总是收到此错误:

websocket.js:54 WebSocket connection to 'ws://domain.com/?EIO=4&transport=websocket' failed:

到目前为止我做了什么:

1. 我首先认为问题出在代码或 SSL 上，但即使没有 SSL，我也会遇到相同的错误。并且套接字的代码在本地执行良好。
2. 然后我觉得问题出在Nginx上，并且我浏览了不同的网站和其他人针对类似问题的解决方案，但我没有发现我的Nginx有任何问题。这是我的 Nginx 的样子:

server {
        server_name domain.com;

        location / {
                proxy_pass http://localhost:3001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        // I have removed ssl configuration for now. 
}

我在某处读到我们需要允许 azure 接受套接字连接。但这些都与应用程序服务相关。我有一个在服务器上运行的 VM 实例，并且我没有发现 azure 配置或 NSG 有任何问题。我订阅了 azure 提供的服务，但我没有使用免费服务。

如果您还有其他值得我尝试的事情，请提出建议。代码看起来很好，因为我可以在本地计算机上执行套接字连接，但不能在服务器上执行。我期待着伟大的思想家来指导我。抱歉，如果我做了/错过了上面的一些愚蠢的事情。

此外，如果您需要更多详细信息，请告诉我。

Answer 1

• WebSocket 从 1.3.13 版本开始在 nginx 中可用

• 还将代理通行证设置为您的域，例如:http://websocket;此外，如果有多个地址映射到该域，nginx也会浏览所有这些。

• 还将proxy_set_header Connection设置为$connection_upgrade;，就像proxy_set_header Upgrade中的$http_upgrade一样> .

所以 nginx 应该是这样的

server {
        server_name domain.com;

        location / {
                proxy_pass http://websocket;
                proxy_http_version 1.3.13;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $connection_upgrade;
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        // I have removed ssl configuration for now. 
}

引用以下Nginx documentation在代理通行证上

另请参阅此 article作者:莎朗·克里斯汀