vue跨域使用websocket_vue使用websocket问题记录-CSDN博客

本文链接：https://blog.csdn.net/weixin_36051633/article/details/112902377

本文记录了在Vue2.0项目中使用WebSocket遇到的跨域问题及其解决过程。从Vue的初步体验谈到WebSocket在单页应用中的应用，详细描述了尝试使用vue-websocket和ws库的失败经历，以及最后如何利用原生window.WebSocket成功解决跨域问题。此外，还提及了Socket.IO库在不同环境下的适用性和遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近笔者新参与的一个web项目，拟定采用vue2.0来编写，期间遇到有关使用websocket的问题，记录一下，个中遇到的一些问题和解决方法，分享给有需要的人。

首先说一下vue2.0的初学体验，目前感觉上手还是很快的，对比其他框架比如angularjs，react等，的确是轻量级很多，并且确实如作者尤大大所诉，真实体会到了其渐进式前端解决方案的思想，你完全可以根据项目的实际情况，选择性的采用最适合的模块和组件组合来更快速实现自己的功能，然后随着业务功能的扩展，渐进式的调整系统的架构，或采用更适合当前情况的架构。

结合项目的实际情况，项目本身不大，初期版本定位是一个小型的单页面应用，目前团队前端开发人员都有一定的angularjs的开发基础，此时切换到vue上面来，也挺顺利的，既然是复杂度不是特别高的单页面应用，初期定位就是用vue-cli来构建项目的基本结构，然后配上vue-route路由，vue-resource请求API数据，很快页面雏形出来了。

吧啦吧啦说了这么多，貌似还没切入主题，websocket，嗯，现在开始切入(咳咳，容我缓缓，刚刚还沉浸在尤大大的vue里面)。

笔者不是专业的前端，对websocket还不是很了解，项目里面有一个应用场景是要在页面上实时显示服务端推送过来的数据，很显而易见的的服务端给客户端推送消息的场景，大家自然想到了websocket，而我但是对这个还是不是很清楚的，迅速查资料，知乎上这篇文章貌似是讲的不错，小白表示看的很过瘾。

这个功能，服务端也采用了websocket，这需要客户端也相应的采用websocket来与客户端建立ws连接，这样客户端和服务端就可以双向的发送数据。笔者的定式思维是，一拿到这个就会觉得是不是又需要npm安装什么包似的，因为这个功能是从另一个项目(暂且称其为项目B)的功能迁移过来的，而项目B前端是用的angularjs开发的，前端直接用的angularjs的一个websocket的包(angular-websocke)，然后几行代码就敲定了，创建连接，发送数据，接收数据，很是方便。然后切换到vue里面，很自然的就去搜有木有vue的websocket包，很快找到了vue-websocket，安装好后，调试，直接报错：

XMLHttpRequest cannot load http://192.168.0.239:9000/socket.io/?EIO=3&transport=polling&t=LbjddEK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' i