Vue CLI配置代理后Firefox中Webpack Dev Server WebSocket连接中断问题

问题现象 #

配置Vue CLI开发服务器代理后，Firefox加载页面时持续出现WebSocket连接失败报错：

The connection to ws://[ip]:8080/ws was interrupted while the page was loading.

未配置代理时无此问题。

重现步骤 #

• 安装Vue CLI并创建新项目：vue create test-project
• 使用Vue 3 + Yarn环境
• 修改vue.config.js配置代理：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: 'http://test.me',
  },
});

• 执行yarn serve启动服务
• 在Firefox中访问http://localhost:8080并查看控制台

原因分析 #

Vue CLI的devServer默认会将所有请求（包括WebSocket）转发到代理目标地址，但http://test.me并未提供WebSocket服务，导致连接中断。Firefox对WebSocket连接失败的提示比其他浏览器更明显，因此触发该报错。

解决办法 #

方案1：禁用WebSocket代理或限定代理路径 #

修改vue.config.js，通过配置ws: false禁用WebSocket代理，或者仅代理特定路径（如API请求）避免影响WebSocket：

禁用WebSocket代理

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/': {
        target: 'http://test.me',
        ws: false,
        changeOrigin: true
      }
    }
  }
});

仅代理API路径

如果只需代理后端API请求，可指定路径前缀（如/api），避免代理WebSocket的/ws路径：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://test.me',
        changeOrigin: true
      }
    }
  }
});

方案2：确保目标服务器支持WebSocket（业务需要时） #

如果你的业务场景确实需要代理WebSocket请求，需确保http://test.me服务器已正确配置WebSocket服务，能够正常处理连接请求。

验证 #

修改配置后重启yarn serve，在Firefox中重新访问页面，检查控制台是否仍存在报错。

内容的提问来源于stack exchange，提问作者Chris Starling