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