React项目中能否在Webpack 4.5中配置公司代理？

嘿，这个问题我之前帮同事排查过类似的，咱们一步步来搞定：

首先得搞明白为啥你能ping通外部IP，但Webpack请求会返回ECONNREFUSED——ping用的是ICMP协议，和WebSocket依赖的TCP协议完全不是一回事，大概率是浏览器同源策略拦截，或者公司网络的防火墙/安全规则不允许前端直接发起外部WS连接，这时候用Webpack DevServer的代理中转就刚好能解决问题。

Webpack 4.5对应的webpack-dev-server版本一般是3.x，这个版本完全支持WebSocket代理配置，具体操作如下：

1. 修改Webpack配置文件 #

找到你的webpack.config.js（或者开发环境专属的webpack.dev.js），在devServer里添加代理配置，重点要开启WebSocket支持：

module.exports = {
  // 其他项目配置（entry、output、loader等）...
  devServer: {
    port: 3000, // 你的本地开发端口
    hot: true,
    // 核心代理配置
    proxy: {
      // 这里定义前端WS请求的前缀，比如前端请求/ws/chat就会被代理
      '/ws': {
        target: 'ws://你的外部WS服务IP:端口', // 替换成实际的外部WS地址
        ws: true, // 必须开启！告诉DevServer这是WebSocket代理
        changeOrigin: true, // 如果目标服务校验请求Origin，开启这个会自动适配
        secure: false, // 如果是普通ws而非wss，关闭安全证书校验
        logLevel: 'debug' // 可选，开启后能看到代理日志，方便排查问题
      }
    }
  }
};

2. 调整前端WS连接代码 #

原来前端直接写的外部WS地址要改成相对路径，比如：

// 原来的写法（会被同源策略拦截）
// const ws = new WebSocket('ws://外部IP:端口/chat');

// 改成代理后的相对路径
const ws = new WebSocket('/ws/chat');

3. 特殊情况：公司内部需要HTTP代理 #

如果你的本地机器访问外部网络必须走公司的HTTP代理，那还要给Webpack代理加agent配置：
首先安装依赖包：

npm install http-proxy-agent --save-dev

然后修改Webpack配置：

const HttpProxyAgent = require('http-proxy-agent');

module.exports = {
  // ...其他配置
  devServer: {
    proxy: {
      '/ws': {
        target: 'ws://你的外部WS服务IP:端口',
        ws: true,
        changeOrigin: true,
        // 添加公司代理配置
        agent: new HttpProxyAgent('http://公司代理IP:端口')
      }
    }
  }
};

最后重启Webpack DevServer，试试WS连接应该就能成功了——现在是DevServer作为中间层去连接外部WS服务，绕过了浏览器的同源限制，同时也能适配公司的网络规则。

内容的提问来源于stack exchange，提问作者Stefano Cortese