Angular websocket在生产中不能与Azure VM nginx一起工作，但在本地工作

Question

我在这个问题上花了将近一周的时间，但我无法解决这个问题。

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

它在我的本地上运行得很好，但当我将代码部署到服务器时，我总是会收到以下错误：

websocket.js:54WebSocket连接到'ws://domain.com/？EIO＝4&transport=websocket'失败：

到目前为止我所做的：

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. 
}

3. 我在某处读到我们需要允许azure接受套接字连接。但这些都与应用程序服务有关。我有一个虚拟机实例在服务器上运行，我认为azure配置或NSG没有任何问题。我有azure提供的订阅服务，我不使用免费服务

如果你有其他我应该尝试的东西，请建议它。代码看起来很好，因为我可以在本地机器上执行套接字连接，但不能在服务器上执行。我期待着伟大的头脑来指导我。对不起，如果我在做/错过上面的傻事。

此外，如果你需要更多的细节，请告诉我。

Answer 1

• WebSocket在版本1.3.13 的nginx中可用

• 还将proxy pass设置为您的域，例如：http://websocket;。如果有多个地址映射到域，nginx将遍历所有地址。

• 也可以像proxy_set_header Upgrade中的$http_upgrade一样将proxy_set_header Connection设置为$connection_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文档

另请参阅Sharon Chirstine 的这篇文章