1

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

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

有两种情况发生,我不确定为什么一种有效,一种无效,所以我希望有人能提供帮助。

失败的场景

1) 使用服务器 IP 10.1.1.1 上的 Boost::Beast CPP 库启动我的 WS 服务器,使用 chrome 插件“Simple WebSocket Client”我连接到我的服务器 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 用于 Angular5。它基本上是一个空白的 angular-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地址?

任何帮助将不胜感激。

4

1 回答 1

0

在这两种情况下,Beast 似乎都在发送成功的状态代码(101 切换协议)。但在失败的情况下,客户端声明的 Origin 与响应字段“Access-Control-Allow-Origin”中允许的来源列表不匹配。这可能是问题吗?此外,您有两个具有相同值的“Access-Control-Allow-Headers”条目,这是有意的吗?

于 2018-04-28T15:28:11.320 回答