【报错】vite+vue3项目中WebSocket代理连接失败的一种可能性

最新推荐文章于 2024-07-15 21:48:00 发布

小阿承

最新推荐文章于 2024-07-15 21:48:00 发布

阅读量271

点赞数 4

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/weixin_51008622/article/details/140102765

版权

注意vite.config.ts中代理设置是否设置header

vite.config.ts

"/api/": {
    target: `http://1.1.1.1/`, //请求后台接口
    ws: true,
    changeOrigin: false, // 允许跨域
    headers: {
      Connection: "keep-alive",
    },
},

header设置会干扰WebSocket协议的正常升级流程，从而影响到WebSocket的通信

注释即可，或者分开做代理，Vite 在开发环境下默认可能会修改Connection头部的值为close。这意味着每个HTTP请求完成后，连接会被关闭，而不是保持打开状态以供后续请求复用。

"/api/": {
   target: `http://1.1.1.1/`, //请求后台接口
   ws: true,
   changeOrigin: false, // 允许跨域
},

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小阿承

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【报错】vite+vue3项目中WebSocket代理连接失败的一种可能性

vite+vue3项目中WebSocket代理连接失败的一种可能性
复制链接

扫一扫

vue-socket.io接收不到数据问题的解决方法

10-15

主要介绍了解决vue-socket.io接收不到数据问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue3.2+vite+代理，使用websocket

nlhhln的博客

07-10

5000

之前以为websocket复杂，想使用插件来实现，查了一番资料，原生写法就很简单。

参与评论您还未登录，请先登录后发表或查看评论

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

Nginx服务、Vite项目如何设置ws（websocket）代理？

咚の窝

12-05

9844

最近干活中遇到请求访问地址代理的问题，http请求代理到是没啥问题，主要是WebSocket代理配置，今天折腾了一上午加下午一小时，才将其配置好，主要是部署服务器的时候nginx这一块不太清楚，作为一个初级前端，确实还有待提高。本文主要细致的讲解一下ws代理如何设置，在开发环境主要是vite代理设置方法，生产环境给Nginx设置代理。在代码编写过程中，主要是url应该如何拼写，下面是项目中使用的请求地址：这里的地址需要注意，这个是拦截代理的标志（ps：这里也可以写别的路径替换，它不是必须的，但是后面配置需

vite跨域配置踩坑，postman链接后端接口正常，但是前端就是不能正常访问

黎小小的博客

08-09

2754

问题来了：设置为port80，host:0,0,0,0或者host: '127.0.0.1',时，请求后端报404。不设置时就能正常访问。都可以访问，但是如果设置了只有设置的 http://127.0.0.1:80/或者http://localhost:80/可以访问。根据以下配置，发现怎么都链接不了后端地址，proxy对了呀。仔细看，才发现host有问题。将监听所有地址，包括局域网和公网地址。指定服务器应该监听哪个 IP 地址。这里是本地前端访问地址配置，不设置默认。

如何给websocket配置代理

qq_44476779的博客

01-08

2073

最近在工作中遇到websockt代理问题，领导不想让socket地址写死，需要动态配置。

vite 配置代理

YZ_ZZZ24的博客

11-23

7879

在vue2中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。1.在proxy中设置要访问的地址，并重写/api为空的字符串，因为我们真正请求的地址是没有带/api，这个重写很重要!!!2.在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了。

vite 解决proxy跨域问题

Lzysnd的博客

03-11

2314

造成的，是浏览器对JavaScript实施的安全限制。这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去。跨域，是指浏览器不能执行其他网站的脚本。在vite.config.js中。

基于Vue3+Vite+TypeScript打造的聊天室项目源码.zip

11-29

vue3中使用Web Worker多线程（TS风味版）

06-17

用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644

electron + vue + vite + qwebchannel 实现C++与JS通信

07-18

界面使用前端electron + vue + vite + layui + qwebchannel.js 实现 qt子进程自动启动，websocket Client自动重连，C++与js/ts的双向异步通信，快速开发博文地址：...

golang-websocket：使用golang和vite.js进行项目测试websocket

03-04

首先，在Vite配置文件(vite.config.js)中，可能需要配置公共路径以确保WebSocket连接的URL正确。然后，在Vue组件中，你可以创建一个WebSocket实例，监听连接状态变化，发送和接收消息。以下是一个简单的Golang ...

基于vue3、vite、typescript等最新前端技术实现的demo

01-22

在Vue3项目中，TypeScript的集成使开发者能更好地利用类型检查，编写更安全的代码。【前端开发】前端开发是构建Web应用程序的重要部分，涉及HTML、CSS和JavaScript等技术。随着Vue3、Vite和TypeScript的使用，...

vite设置代理

weixin_61738415的博客

05-01

656

vite设置代理

【解决】websocket ws连不上或无法连接

ruisasaki的博客

06-06

2万+

ws连接失败如何解决

【vue+websocket】vue本地链接websocket正常,线上部署websocket 无法加载响应数据【已解决】

我的开源项目:https://gitee.com/derekgo/vue-cms_xg

06-17

2020

在你的服务器的安全组中开放websocket的端口号。如果有，可以忽略当前步骤。同时，线上的websocket需要用域名(如果有不懂可以留言，我看到了应该会回复。踩坑不易，还希望各位大佬支持一下。评论，你的意见是我进步的财富！如有错误，请多多指教。

Vite的WebSocket

最新发布

m0_46543935的博客

07-15

847

Socket：Socket 是传统的网络通信方式，使用 TCP（传输控制协议）或 UDP（用户数据报协议）进行点对点通信。API：Java 提供了 java.net 包中的 Socket 类和 ServerSocket 类来实现客户端和服务器之间的通信。WebSocket：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，适用于需要实时通信的 Web 应用。API：Java 提供了 javax.websocket 包来实现 WebSocket 客户端和服务器。

vue3 + vite 代理配置无效的原因

GFreasy的博客

01-09

5518

vue3 + vite 代理配置无效的原因。

vue3+vite +ts 使用websocket

06-06

好的，我可以为您提供一些关于在Vue3+Vite+TypeScript中使用WebSocket的信息。首先，您需要安装WebSocket包，可以使用npm命令进行安装： ``` npm install --save ws ``` 然后，在Vue组件中，您可以使用以下代码来创建WebSocket连接： ```TypeScript import { defineComponent } from 'vue'; import WebSocket from 'ws'; export default defineComponent({ setup() { const ws = new WebSocket('ws://localhost:3000'); ws.onopen = () => { console.log('WebSocket连接已打开'); } ws.onmessage = (event) => { console.log('接收到消息: ', event.data); } ws.onclose = () => { console.log('WebSocket连接已关闭'); } ws.onerror = (error) => { console.error('WebSocket连接发生错误: ', error); } return { ws, }; }, }); ``` 在以上代码中，我们使用WebSocket类实例化了一个ws对象，然后设置了一些回调函数来处理WebSocket的不同事件。最后，如果您使用Vite作为您的开发服务器，您需要在vite.config.ts中配置proxy，以便在开发过程中能够正确地进行WebSocket连接。例如： ```TypeScript import { defineConfig } from 'vite'; export default defineConfig({ server: { proxy: { '/ws': { target: 'ws://localhost:3000', ws: true, }, }, }, }); ``` 这样，您就可以在Vue3+Vite+TypeScript项目中使用WebSocket了。