webpack的webSocketURL配了不生效?

我们在使用webpack(或者Rspack)的devServer时,可以修改hostport等参数,以改变本地应用启动的监听地址及允许的域名,比如下面配置:

js 复制代码
{  
  // ...
  devServer: {
    // 用来允许其他设备的访问
    host: '0.0.0.0',
    port: 3000,
    // 允许所有的域名,包括代理转发过来的
    allowedHosts: 'all',
    client: {},
  }
}

以上是devServer的基本配置,当然正常情况下你都可以不用管,webpack默认行为基本可以满足大多数的情况。

上面的client属性用来配置浏览器端HMR如何与服务端交互,包括log level, 是否打出进度,是否错误时显示浮层以及websocket的自定义地址及协议。这里主要介绍下自己在使用client.webSocketURL时遇到的坑,以及后面应该如何避免。

出现问题的场景

首先正常情况下,如果我们本地使用的是localhost或者127.0.0.1等ip时,无任何问题,都是ip直接访问即可,主要的一种情况是当你需要使用域名访问页面时(比如有些单点登录需要统一用域名访问)需要把域名指向到本地,我们一般有以下方案:

  1. 最直接的办法就是改host指向,利用SwitchHosts这种app
  2. 自定义DNS服务,如dnsmasq这类服务
  3. 使用代理App,例如Charles, Proxyman这种的Map Remote功能把域名指向到本地
  4. 浏览器插件代理

上面的方法各有优缺点,前面2种类似,但是经常会出现修改不生效,要清掉浏览器、系统各种dns缓存等情况,搞多了也很烦人;代理App的话没有缓存问题,主要是要做些配置,而且需要支持websocket的转发代理,幸好上面2个都支持🍻;浏览器插件就比较门槛低一些,无需安装其他服务或app,装个插件就搞定了,但是也存在一些问题:比如换个浏览器还得装一遍,HTTPS转发可能出问题,websocket看起来也有问题。大家可以根据自己的情况选择合适的解决方案。

话说回来笔者遇到的问题是当使用域名时,ws的链接也是跟页面相同的域名,当然我可以使用代理App把websocket的域名也转到localhost。

但是我们希望ws直接ip直连,不要走域名,既然devServer支持改ws链接,直接改配置不就行了:

js 复制代码
{  
  // ...
  devServer: {
    host: '0.0.0.0',
    client: {
      webSocketURL: 'ws://0.0.0.0:3000/ws'
    }
  }
}

按照直觉ws也改成0.0.0.0不就行了,大功告成,然而一试发现被打脸了,发出的ws请求还是域名,难道哪里配错了?又试了通过对象的方式传入:

js 复制代码
{  
  // ...
  devServer: {
    host: '0.0.0.0',
    client: {
      webSocketURL: {
        hostname: '0.0.0.0'
      }
    }
  }
}

发现还是一样的问题,说明配的应该是对的,但是为啥不生效呢,继续查看了官方文档,也没特别说明,而且它也是这样写的🧐:

问题根源及解决办法

既然从文档上看不出来啥,只能从浏览器使用的client相关代码(node_modules/webpack-dev-server/client)去看到底为啥链接不变,通过一层层往上找发现ws链接是在这个文件里生成的webpack-dev-server/client/utils/createSocketURL.js,主要就是createSocketURL这个方法:

上图可以看到里面直接判断了hostname === "0.0.0.0",当为这个地址的时候并且在网页里时,直接用页面的hostname替代😭,我们也可以从上面的注释里看到为何要做这个判断,主要是为了支持在electron,ionic这类做桌面应用时的情况。

那我们的最简单的解决办法就是把0.0.0.0改成127.0.0.1或者其他局域网ip就可以直连了!

相关推荐
CodeSheep6 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员11 分钟前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc18 分钟前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii6621 分钟前
120html
前端
.生产的驴21 分钟前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
峥无28 分钟前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html
南囝coding35 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒38 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码1 小时前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..2 小时前
ES6是什么
前端·javascript·es6