Webpack Dev Server代理请求遇ECONNRESET错误，页面持续刷新如何解决？

问题现象 #

本地使用Webpack Dev Server运行React应用，配置了将所有UI请求代理至NodeJS服务器后，Chrome中打开应用页面会持续刷新；日志中频繁出现以下错误：

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:3000 to http://[::1]:8081/ [ECONNRESET]

相关配置 #

{
  mode: 'development',
  devtool: 'source-map',
  resolve: {
    alias: {
      path: require.resolve('path-browserify'),
      react: require.resolve('react'),
      'react-dom': require.resolve('react-dom'),
      'react-router-dom': require.resolve('react-router-dom'),
      'spectra-ui-commons$': require.resolve('spectra-ui-commons')
    }
  },
  entry: {
    'app-shell': APP_PATH
  },
  output: {
    path: BUILD_PATH,
    filename: isDev ? '[name].js' : '[name].[hash].js',
    assetModuleFilename: 'assets/[name].[ext]'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
      {
        test: /\.(ts|tsx)$/,
        include: `${APP_PATH}/apps`,
        exclude: /node_modules/,
        loader: 'ts-loader'
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        type: 'asset/resource'
      },
      {
        test: /\.svg$/,
        use: 'svg-sprite-loader'
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  devServer: {
    static: {
      directory: BUILD_PATH,
      staticOptions: {},
      watch: true,
      publicPath: '/build/app/'
    },
    devMiddleware: {
      writeToDisk: true
    },
    compress: true,
    open: true,
    hot: true,
    port: 3000,
    allowedHosts: 'all',
    proxy: {
      '/': 'http://[::1]:8081'
    }
  },
  plugins: [
    new ExternalTemplateRemotesPlugin(),
    new MiniCssExtractPlugin({
      filename: isDev ? '[name].css' : '[name].[hash].css',
      chunkFilename: isDev ? '[id].css' : '[id].[hash].css'
    }),
    new webpack.DefinePlugin({
      'process.env.env': JSON.stringify(process.env.env || 'development'),
      'env.backendHost': JSON.stringify('http://localhost:8081')
    })
  ]
};

解决方案 #

1. 缩小代理范围（优先推荐） #

不要将根路径/全部代理，仅针对后端API的前缀路径设置代理。比如后端接口都以/api开头，修改devServer.proxy配置：

proxy: {
  '/api': 'http://localhost:8081'
}

这样Webpack Dev Server自身的静态资源、热更新（HMR）请求会由自己处理，不会被错误转发到后端服务器。

2. 替换IPv6地址为IPv4 #

当前代理目标使用了IPv6本地回环地址[::1]，部分场景下后端服务器可能仅监听IPv4的localhost。将代理地址替换为localhost或127.0.0.1：

proxy: {
  '/': 'http://localhost:8081'
}

（如果必须保留根路径代理，优先尝试此调整，同时确保后端服务器能正确处理所有静态资源请求）

3. 排除Webpack内部请求 #

若必须保留根路径代理，通过bypass函数排除Webpack Dev Server的内部请求（如热更新、静态资源）：

proxy: {
  '/': {
    target: 'http://localhost:8081',
    bypass: function(req, res, proxyOptions) {
      // 排除热更新和静态资源路径，由dev server自行处理
      if (req.path.startsWith('/sockjs-node') || req.path.startsWith('/build/app')) {
        return req.path;
      }
    }
  }
}

4. 检查后端服务器状态 #

确认NodeJS服务器确实在8081端口正常运行，且无端口占用、防火墙拦截等问题，直接访问http://localhost:8081验证服务可用性。

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