WebSocket connection to ‘ws://x.x.x.x:8080/ws‘ failed:报错

已于 2024-02-28 16:31:53 修改
阅读量5.2w 收藏 59
点赞数 23
分类专栏： vue 文章标签： websocket 网络协议 网络
于 2022-09-22 17:10:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62328829/article/details/126995531
版权

今天在写vue项目时打开控制台突然发现十几个报错，内容如下

 这是个啥，，，头大 

百度一番，发现这个东西叫做WebSocket长连接。。。。。

为了解决这个问题，花了我一番力气

百度到的解决方法好多，但是都是在vue.config.js中进行修改，以下是几种我找到的方法（对我没用，或许对你有用）

方法一

 方法二

方法三

以上为我百度到的方法，但是对于我的项目来说，没起作用，

以下为我的解决方法

因为之前proxy配置跨域的时候（配置在vue.config.js中），如下代码

 写成了这样子，

应该是把每一个context作为一个对象，就是说proxy中可以设置很多个目标服务器，所以每个目标服务器都应该是一个对象。下面是修改前后的样子

 完美解决问题，切记重新npm run serve看效果

来碗疙瘩汤
关注
  • 23
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
WebSocket的通信过程与实现方法详解
01-19
什么是 WebSocket ？ WebSocket 是一种标准协议，用于在客户端和服务端之间进行双向数据传输。但它跟 HTTP 没什么关系，它是基于 TCP 的一种独立实现。 以前客户端想知道服务端的处理进度，要不停地使用 Ajax 进行轮询，让浏览器隔个几秒就向服务器发一次请求，这对服务器压力较大。另外一种轮询就是采用 long poll 的方式，这就跟打电话差不多，没收到消息就一直不挂电话，也就是说，客户端发起连接后，如果没消息，就一直不返回 Response 给客户端，连接阶段一直是阻塞的。 而 WebSocket 解决了 HTTP 的这几个难题。当服务器完成协议升级后（ HTTP -
Vue3 报 WebSocket connection to ‘ws://x.x.x.x:8080/ws‘ failed 的错误
weixin_55988068的博客
11-09 5601
原因：WebSocket是一种双向通信的协议，它在尝试建立到 'ws://x.x.x.x:8080/ws' 的通信失败。原因可能是服务器 'x.x.x.x' 不可用，或WebSocket服务未正确配置。因此，我们去配置一下通信问题。问题：控制台每过几秒就报WebSocket的错误，但是页面显示正常。
ruoyi-vue集成websocket后报错“WebSocket connection to ‘ws://localhost:8090/websocket‘ failed:”
最新发布
qq_22656311的博客
05-28 435
ruoyi-vue集成websocket后报错“WebSocket connection to 'ws://localhost:8090/websocket' failed:”
解决报错：Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed：Error
05-03 12万+
解决Flask使用Websocket功能报错：Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed：Error during Websocket handshake：Unexpected response code：400。
Nginx反向代理WebSocket服务连接报错：WebSocket connection to “wss://xxx/xxx“ failed
wx_l617188072的博客
11-22 3197
一个是 WebSocket 是一个逐跳协议，因此当代理服务器拦截客户端的升级请求时，需要向后端服务器发送自己的升级请求，包括相应的头文件。此外，由于 WebSocket 连接长期存在，与 HTTP 使用的典型短期连接相反，反向代理需要允许这些连接保持打开状态，而不是关闭它们，因为它们似乎处于空闲状态。WebSocket 协议与 HTTP 协议不同，但 WebSocket 握手与 HTTP 兼容，使用 HTTP 升级工具将连接从 HTTP 升级到 WebSocket。# 关键配置 start。
微信小程序webSocket的使用方法
11-20
博客简介 本篇博客介绍微信小程序中webSocket的使用方法，以及如何用局部网络建立webSocket连接，进行客户端与服务器之间的对话： webSocket简介 微信小程序端API调用 服务器端使用nodejs配置 演示websocket webSocket简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输
springboot中移除tomcat插件的方法
Mr_lambor的博客
10-05 1497
<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-web</artifactId>    <!-- 从依赖信息里移除 Tomca...
解决vue问题WebSocketClient.js?5586:16 WebSocket connection to ‘ws://x.x.x.60:8081/ws‘ failed
PHP_前端_ios软件制件_概念西瓜专栏
03-08 2万+
创建一个新的项目的时候，使用vue-cli创建。 安装vue-cli npm install -g @vue/cli vue-cli文档 创建好之后，运行npm run serve,会启动一个基于express的服务器，就可以热重载代码了，不会手动刷新去查看修改后的代码，很方便。 原理是在运行vue前端代码的时候，服务器还会运行一个websocketClient,与服务器通信。如果检查到代码有修改，就会刷新页面。 如果websocket通信有问题是不会正常进行热重载的。 因为我是直接在...
【报错】WebSocket connection to ‘ws://xxx.xxx.x.xxxx:8080/ws‘failed:
z914020826的博客
10-15 1万+
简单来说，WebSocket 为web应用程序客户端和服务端之间（客户端服务端）提供了一种全双工通信机制，报错是因为发送报文的过程出现问题。在Vue项目的config.vue的文件中添加一下配置信息。当我们运行Vue项目时，你可能会遇到一下问题。这样问题也就能解决了，也不会出现报错的问题了。
关于ruoyi集成websocket后报错“WebSocket connection to ‘ws://localhost‘ failed:”
qq_38786110的博客
04-19 9921
在若依的脚手架中集成websocket遇到的问题。
WebSocket connection to ‘ws://10.151.2.241:8080/ws‘ failed:
Dragon_Z的博客
10-18 1万+
3. 不正确的WebSocket地址：请确保你正在使用正确的WebSocket地址，包括正确的协议（通常是 'ws://' 或 'wss://'），主机名（IP地址或域名）和端口号。2. 网络问题：这种错误也可能由于网络问题导致，比如防火墙阻止了WebSocket连接，或者存在网络配置问题。- 在可能的情况下，尝试使用不同的WebSocket库或客户端，以确定问题是由库的问题还是服务器问题引起的。- 确保服务器正常运行，WebSocket服务正在监听正确的端口，并且没有防火墙或网络配置问题。
解决报错：WebSocket connection to ‘ws://124.207.120.104:9502/‘ failed: Error in connection establish
热门推荐
是日已过，命亦随减的博客
09-09 17万+
使用swoole连接WebSocket时报错： WebSocket connection to ‘ws://123.207.120.104:9502/’ failed: Error in connection establish 请运行以下代码： 关闭服务：systemctl stop firewalld.service 关闭后出现如下图则说明连接成功。 ...
webSocket connection to ‘ws://127.0.0.1:3000/websocket/15/‘ failed:
m0_74163986的博客
11-22 1903
今天写一个ws发起请求小demo，结果一直报错，总以为是前端有问题，以为sockerUrl的字符串写错了，结果到后来才发现是后端没写WebSocket的配置类。1.就是socketUrl那个字符串，完完全全盯着看不知道看了多久，结果他根本没错，2.如果使用了jwt或者security，一定要在配置类里面放行，比如重写这个方法。符号这个键，要英文输入，且不加shift），不能用双引号或者单引号，符号包起来（就是esc键下面那个键，有。简单说一下这个问题检查了哪些东西，简直太蠢了，希望少犯低价错误。
Vue第12篇，Vue项目使用WebSocket时报错: connection to ‘ws://...‘failed: Error in connection establish
weixin_65793170的博客
12-01 2万+
报错如下，意思是连接到'ws://…'failed:连接建立错误；connection to ‘ws://...‘failed: Error in connection establish
WebSocket connection to ‘ws://xxx.xxx.192.223:xxxx/‘ failed: WebSocket opening handshake timed out
郭宝的博客
07-21 3万+
背景： 在通过 websocket 给服务器发送数据时，出现了如下错误 chunk-592a5c69.4681337f.js:1 WebSocket connection to 'ws://116.255.192.223:2346/' failed: WebSocket opening handshake timed out 解决办法：
vue 报错：WebSocket connection to ‘ws://192.168.51.116:3000/ws‘ failed:
sherlyxoxo的博客
07-06 3万+
vue websocket connection报错
webSocket connection to ‘xx‘ failed: Error during WebSocket handshake: Unexpected response code: 200
qq_43413908的博客
06-13 3499
正确建立websocket连接后，返回状态码101，不会返回200等。websocket相关nginx代理内容。
WebSocket connection to 'ws://***/' failed: Establishing a tunnel via proxy server failed
yshx_zz的博客
08-21 1万+
前端使用的是socket.io, 服务器上代理的是Nginx ，浏览器为Chrome 描述: 设置为进入界面后通过socket.io-client与api层socket.io建立连接，此时前端Console输出： WebSocket connection to '***' failed: Establishing a tunnel via proxy server failed   问题...
WebSocket connection to 'ws://192.168.2.128:8080/ws' failed:
08-24
这个错误信息 "WebSocket connection to 'ws://192.168.2.128:8080/ws' failed" 表示在尝试建立WebSocket连接时失败了。根据引用中的代码，可以看出在项目的配置文件vue.config.js中定义了一个WebSocket的URL为'ws://192.168.0.103:8080/ws'。而你在引用中提到，并没有使用到这个WebSocketClient，但是仍然收到了这个错误。在引用中提到，重新安装依赖并重新运行项目后，错误不再出现了。所以，你可以尝试重新安装依赖并重新运行项目，这可能会解决这个错误。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [WebSocketClient.js?5586:16 WebSocket connection to ‘ws://192.168.0.103:8080/ws‘ failed:](https://blog.csdn.net/qq_52855464/article/details/125694926)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值