在 vue 开发环境中使用代理时将 websocket 排除

背景

最近在接手一个新的前端项目，启动后运行时发现控制台报了很多类似如下异常，而且频率很高（差不多每隔一秒就报），严重影响项目开发调试。

WebSocket connection to 'ws://localhost:9999/sockjs-node/481/ux3hygqx/websocket' failed: Invalid frame header

分析

经过分析发现是由于代理引起的，由于该项目的后端接口路径直接暴露在域名下面，没有类似 'api' 开头，具体的开发代理配置如下：

devServer: {
  proxy: {
    '/': {
      target: 'https://www.lervor.com',
      changeOrigin: true,
      logLevel: 'debug'
    }
  }
}

以上配置导致 ws 的请求也被代理到 target 服务器上，由于该 websocket 主要用于开发环境浏览器实时同步代码的改动，而生产环境不使用相关 websocket 请求，因此不存在相关服务端口，但是出现开头说的错误。因此我们只要屏蔽掉 websocket 代理就可以了。

解决

vue 的 proxyTable 依赖的 npm 包 是 http-proxy-middleware，我们去 github （项目地址）上看下他的详细配置项（传送门），里面刚好有是否代理 ws 的配置项：

option.ws: true/false: if you want to proxy websockets

因此，只要在代理配置中加上 ws: false 就可以了，修改后的 proxy 配置如下：

devServer: {
  proxy: {
    '/': {
      target: 'https://www.lervor.com',
      changeOrigin: true,
      ws: false,
      logLevel: 'debug'
    }
  }
}

版权属于：瞭月

本文链接：https://www.lervor.com/archives/241/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。