背景

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

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'
    }
  }
}