vite websocket 公网 端口 连接异常问题
时间:2021-12-09
本文章向大家介绍vite websocket 公网 端口 连接异常问题,主要包括vite websocket 公网 端口 连接异常问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vite websocket 端口连接异常问题
在vite websocket 开发时,可能会遇到端口是写死的,如果公网地址或域名 跟 代码本地的端口不一致,websocket 会出现连接异常的情况
在浏览器调试中可以发现浏览器使用 ws://公网地址或域名:本地端口 或 wss://公网地址或域名:本地端口 去连服务器。
传统网络架构中,大家习惯于服务通过 防火墙 或者 代理服务器 发布出去,而且本地服务端口跟发布出去的公网地址端口往往不一致。
比如本地3000 或 24678 ,发布出去通常会用http 80 或 https 443。
关于此问题 vite 在 2021.5.29 之后的版本应该都已经解决
官方说明
详细可以参考大佬在 github 关于此 功能 or bug 的讨论和 merge 过程:
https://github.com/vitejs/vite/pull/3578
官方配置说明参考如下:
https://vitejs.dev/config/#server-hmr
关于clientport 说明
clientPort 是一个高级选项,只在客户端的情况下覆盖端口,这允许你为 websocket 提供不同的端口,而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理,这非常有用。
当使用 server.middlewareMode 或 server.https 时,你需将 server.hmr.server 指定为你 HTTP(S) 的服务器,这将通过你的服务器来处理 HMR 的安全连接请求。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下,非常有用。
关于解决方案
升级vite,在server.hmr中添加clientport,示例如下,主要内容就是加黑加粗部分。
{ server: { host: true, port: 23456, open: true, proxy: { '/api': { target: process.env.SERVER_URL, changeOrigin: true, }, }, hrm: { clientPort: 80 } }, }
另外nginx 代理ws 或wss 需要格外添加配置,参考文章
nginx 代理 wss/ws websocket 协议
原文地址:https://www.cnblogs.com/yuejunasia/p/15669378.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kubernetes 为什么需要策略支持
- iOS富文本之数字小角标
- 50. Vue名称案例-使用keyup事件监听
- 浅谈树形结构的特性和应用(上):多叉树,红黑树,堆,Trie树,B树,B+树...
- 腾讯云-轻量应用服务器SaaS交付Discuz! Q
- LeetCode 刷题技巧与学习方法
- IntelliJ IDEA 2020.2正式发布,诸多亮点总有几款能助你提效
- SQL之单表查询
- Ubuntu19.10 编译运行C语言程序
- Linux 中杀死指定端口的进程
- Python:将给定字符串中的大写英文字母按以下对应规则替换
- 数据库原理02——关系数据库
- 计算机网络02——物理层
- 面试官你好,我已经掌握了MySQL主从配置和读写分离,你看我还有机会吗?
- 虚拟机中安装双系统