Vue.JS + Socket.IO 和 Cloudflare答案

【问题标题】：Vue.JS + Socket.IO & CloudflareVue.JS + Socket.IO 和 Cloudflare
【发布时间】：2018-09-09 19:57:51
【问题描述】：

我正在尝试使用 socket.io Vue-Socket.io 运行一个网站，并希望启用对 cloudflare 的 DDOS 保护。据我所知，cloudflare 支持 websocket-servers，例如 socket.io。在我成功启用 cloudflare 并更改我的套接字连接的端口后，谷歌开发控制台告诉我：

无法加载http://my-domain.com:2083/socket.io/?EIO=3&transport=polling&t=M9uD7PJ：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://my-domain.com.com' 不允许访问。响应的 HTTP 状态代码为 400。

谁能告诉我我需要改变什么？

PS：我正在使用 vuejs-cli

【问题讨论】：

您必须在您的服务器中启用CORS。这是您必须在服务器端进行的更改。
@acdcjunior 好的，我将与我们的服务器管理员交谈。你有没有成功设置vuejs结合socket.io和cloudflare？
我没有，但是 cloudflare 应该和其他主机没有太大区别...

标签： sockets vue.js socket.io cloudflare

【解决方案1】：

这是一个CORS 问题。

在您的socket.io 服务器中，添加configuration to enable CORS: server.origin()。

在你的情况下：

io.set('origins', 'http://my-domain.com:2083');

这又是一个服务器端问题，它只是反映在 Vue 中。但是 Vue（或客户端）对此无能为力。

【讨论】：

我们发现，我们必须使用我们的 IP 而不是 my-domain.com 才能使其工作。但是现在我们的客户端 JS 代码中有我们的 IP 地址。有什么方法可以向客户端隐藏我们的 IP？
嗯...我认为您不需要使用 IP。 origins 必须是运行 Vue 应用程序的地址（浏览器地址栏的地址）。所以你不需要隐藏地址，因为它是你的应用所在的主机（比如mycompany.com）。如果您需要将 IP 放在那里，那么您的应用程序必须在地址栏中使用该 IP 运行（例如http://156.56.28.11:123/myvueapp），这对您来说隐藏起来也没有意义。或者...您是在某种 iframe 中运行它吗？
好吧，我使用来自 namecheap 的普通 .com 域，并且名称服务器指向 cloudflare。当我获得域后面的 IP 时，我得到了另一个 IP（这是有道理的，因为 cloudflare 保护了我的真实 IP）。所以我真的不知道那里发生了什么。
假设你的用户通过https://nicefoo.com:123/vue访问你的vue应用。当用户查看地址栏时，它会看到该地址，是吗？现在，应该在io中配置的地址就是那个，比如：io.set('origins', 'https://nicefoo.com:123');。
唯一的例外是 cloudflare 创建某种 iframe 并从该 iframe 中为您的应用程序提供服务。在这种情况下，您必须将这个 iframe 所在的地址添加到 io。

【解决方案2】：

我玩弄了@acdcjunior 的一些例子，终于找到了解决方案。

在我的服务器上我实现了：

io.set('origins', 'http://my-domain.com:*');

对于我连接到套接字服务器的客户端：

export const SocketInstance = socketio('my-domain.com:2082');

不要问我为什么，但我试了又试了大约 7 个小时.. 热爱编程 :)

【讨论】：