VUE CLI(webpack)配置webSocket代理,实现与vite中rewriteWsOrigin配置相同的功能

VUE CLI中配置服务代理,使用devServer配置

module.exports = {
  devServer: {
    proxy: {
      // 普通 API 代理
      '/api': {
        target: 'http://backend-server:3000',
        changeOrigin: true
      },
      // WebSocket 专用代理
      '/socket.io': {
        target: 'ws://backend-server:3001',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/socket.io': '/custom-ws-path' // 路径重写
        }
      }
    }
  }
}

高级自定义方案,需要手动处理 WebSocket 请求头时：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/socket': {
        target: 'http://backend-server:3000',
        ws: true,
        onProxyReqWs: (proxyReq, req, socket, options, head) => {
          // 手动重写 Origin 头
          proxyReq.setHeader('Origin', 'http://backend-server:3000')
          // 可添加其他自定义逻辑
        }
      }
    }
  }
}

vite中配置服务代理

// vite.config.js
export default {
  server: {
    proxy: {
      '/socket.io': {
        target: 'http://backend-server:3000',
        rewriteWsOrigin: true, // 关键配置
        ws: true
      }
    }
  }
}