手动引入含new Webpack的库时，webpack devServer代理WebSocket失效如何解决？

问题核心 #

Webpack DevServer的代理规则仅对通过Webpack打包流程处理的资源发起的请求生效，手动通过createElement('script')引入的独立脚本，其内部发起的WebSocket请求不会自动走代理。

可行解决方案 #

方案1：全局拦截WebSocket构造函数，替换连接地址 #

在加载目标脚本前，重写全局WebSocket对象，将脚本中硬编码的目标WebSocket地址替换为DevServer代理路径：

// 在加载/libraryExample.js之前执行这段代码
const originalWS = window.WebSocket;
window.WebSocket = function(url, protocols) {
  // 匹配目标服务器的WebSocket地址，替换为相对路径（对应DevServer代理规则）
  if (url.includes('wss://155.2.105.100')) {
    url = url.replace('wss://155.2.105.100', '');
  }
  return new originalWS(url, protocols);
};

// 然后再加载脚本
const script = document.createElement('script');
script.src = '/libs/libraryExample.js';
document.body.appendChild(script);

同时确保你的DevServer代理配置包含WebSocket支持：

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'https://155.2.105.100',
        ws: true, // 开启WebSocket代理
        changeOrigin: true
      }
    }
  }
};

方案2：配置DevServer专属WebSocket代理规则 #

如果脚本中的WebSocket请求有固定路径前缀（比如/ws），可以直接在DevServer中配置针对性的代理，同时修改脚本内的连接地址（或用方案1的拦截方法替换）：

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/ws': {
        target: 'wss://155.2.105.100',
        ws: true,
        changeOrigin: true,
        secure: false // 如果目标服务器是自签名证书，可添加此选项
      }
    }
  }
};

将脚本内的new WebSocket('wss://155.2.105.100/ws/xxx')改为new WebSocket('/ws/xxx')，即可通过代理转发请求。

方案3：允许跨域直接连接目标WebSocket（需服务器配合） #

如果无法修改前端代码，可在DevServer中添加跨域响应头，让浏览器直接允许连接目标服务器：

// webpack.config.js
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': 'true'
    }
  }
};

注意：此方法需要目标服务器的WebSocket服务配置CORS规则，允许你的DevServer地址（192.168.0.155:8080）跨域访问。

内容的提问来源于stack exchange，提问作者Gloomy Young