Question

所以我在这里使用教程来使用Angular 5.x设置我的socket.io连接

https://blog.codewithdan.com/2017/11/07/pushing-real-time-data-to-an-angular-service-using-web-sockets/

有两种情况正在发生，我不确定为什么一个人正在工作，一个不是，所以我希望有人可以提供协助。

失败的情景

1）使用chrome插件＆＃34; Simple WebSocket Client＆＃34;在服务器IP 10.1.1.1上使用Boost :: Beast CPP库启动我的WS服务器。我连接到我的服务器IP地址，它通过Beast的HTTP处理程序连接，将其视为Websocket升级请求，并生成我的websocket会话并按预期工作和连接。我正在修改我的HTTP请求以设置ALLOW-ACCESS-CONTROL-ORIGIN和其他标志来处理阻止我的Angular客户端的CORS问题目前我只是强迫它允许http://localhost:4200，尽管我计划将其更改为仅回显支持客户的IP，不确定这是否是我诚实的问题的一部分。

如果这里重要的是我添加的请求项

res.insert(boost::beast::http::field::access_control_allow_origin, "http://localhost:4200");
res.insert(boost::beast::http::field::access_control_allow_methods, "GET, POST, OPTIONS, PUT, PATCH, DELETE");
res.insert(boost::beast::http::field::access_control_allow_headers, "X-Requested-With,content-type");
res.insert(boost::beast::http::field::access_control_allow_headers, "X-Requested-With,content-type");

以下是失败案例的回应/请求/一般

https://imgur.com/a/ZqyC1iz

工作方案

1）在服务器上使用Boost :: Beast CPP库启动我的WS服务器。使用Socket.Io for Angular5。它基本上是一个空白的角度cli项目，在我的应用程序组件中

this.socket = socketIo('10.1.1.1:8087').

虽然在查看了其他一些问题之后我也尝试过以下问题，但是人们试图强迫SocketIO直接进入websocket模式而不进行其他http事务。

this.socket = socketIo({transports: ['websocket'], upgrade: false}, '10.1.1.1:8087');

什么结果与工作案例不一样，请求似乎是相同的，但它永远不会在Beast中触发我的websocket升级请求代码，并且就我所知，连接永远不会发生。

以下是失败案例的请求/响应/一般情况 https://imgur.com/a/qiTfFAo

我觉得这与Chrome插件直接连接到服务器的IP地址这一事实有关，当我通过我的角度项目连接它发送Localhost：4200作为原点，而不是客户端机器的实际IP地址？

非常感谢任何帮助。

Answer 1

在这两种情况下，Beast都会发回成功的状态代码（101 Switching Protocols）。但在失败的情况下，客户端声明的Origin与响应字段“Access-Control-Allow-Origin”中允许的来源列表不匹配。这可能是问题吗？此外，您有两个具有相同值的“Access-Control-Allow-Headers”条目，是这个吗？

Angular5 + SocketIO to Boost :: Beast

1 个答案: