webpack-dev-server WebSocket 错误：在 TCP.onStreamRead 处读取 ECONNRESET

Question

我在使用 websocket 代理时遇到这个问题

ws/**

:

<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET
<e>     at TCP.onStreamRead (node:internal/stream_base_commons:217:20) {
<e>   errno: -4077,
<e>   code: 'ECONNRESET',
<e>   syscall: 'read'
<e> }

我已在最底部附加了我的配置和软件包版本。

最初将 webpack 从版本 4 迁移到版本 5。在版本 4 中没有观察到此问题。即使现在切换到项目的旧版本，使用

/ws/**

套接字时也不会出现此错误。

Web套接字本身可以正常接收数据，但是每次与Web套接字交互时IDE控制台都会显示此错误。我试过：

• 添加字段

  webSocketTransport

  、

  webSocketURL

  和

  webSocketServer

• 将 webpack 包更新到最新版本
• 直接安装最新版本的

  ws

  包

软件包版本：

"webpack": "^5.89.0",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"html-webpack-plugin": "^5.6.0",

Webpack 配置：

"use strict";

const webpack = require("webpack");
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { DefinePlugin } = require('webpack');

const Xliff2Json = require("./Xliff2Json");

const ip = require("ip");
const DEV_IP_ADDR = ip.address();
const DEV_PORT = 5002;
const ASSET_PATH = process.env.ASSET_PATH || "/";
const API_DOMAIN = "";
const API_PORT = "";

const isDevelopment = process.argv[process.argv.indexOf('--mode') + 1] === 'development';

const webpackConfig = {
    entry: ["@babel/polyfill", "./src/index.jsx"],
    output: {
        filename: isDevelopment ? "[name].bundle.js" : "[contenthash].bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/",
        library: "app",
    },
    devServer: {
        port: DEV_PORT,
        host: DEV_IP_ADDR,
        historyApiFallback: true,
        devMiddleware: {
            publicPath: ASSET_PATH,
            stats: "minimal",
        },
        client: {
            logging: "info",
            overlay: {
                errors: true,
                warnings: false,
                runtimeErrors: true,
            },
            webSocketTransport: 'ws',
            webSocketURL: `ws://${DEV_IP_ADDR}:${DEV_PORT}/ws`,
        },
        webSocketServer: 'ws',
        static: {
            directory: path.join(__dirname, "dist"),
        },
        open: true,
        hot: true,
        liveReload: true,
        proxy: [
            {
                context: [
                    "/api/**",
                    "/stream/sse/**",
                    "/download/**"
                ],
                target: "https://my-instance.com",
                secure: false,
                changeOrigin: true,
            },
            {
                context: [
                    "/ws/**",
                    "/stream/ws/**"
                ],
                target: "wss://my-instance.com",
                ws: true,
                secure: false,
                changeOrigin: true,
            },
        ],
    },
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ],
            },
            {
                test: /\.(jsx|js)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
            }
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: isDevelopment ? "[id].css" : "[contenthash].css",
            ignoreOrder: true
        }),
        new HtmlWebpackPlugin({
            inject: true,
            hash: true,
            favicon: "./src/static/images/favicon.png",
            template: "./src/index.html",
            filename: "index.html",
        }),
        new DefinePlugin({
            API_DOMAIN: `"${API_DOMAIN}"`,
            API_PORT: `"${API_PORT}"`,
        }),
        new CspHtmlWebpackPlugin(
            {
                "default-src": ["'self'", "my-sentry-backend.com", "wss:", "ws:"],
                "base-uri": "'self'",
                "object-src": "'none'",
                "frame-src": "'none'",
                "worker-src": "blob:",
                "img-src": ["'self'", "data:"],
                "script-src": ["'self'", "'unsafe-eval'"],
                "style-src": ["'unsafe-inline'", "'self'"],
            },
            {
                enabled: true,
                hashingMethod: "sha256",
                hashEnabled: {
                    "worker-src": true,
                    "script-src": true,
                    "style-src": true,
                },
                nonceEnabled: {
                    "worker-src": true,
                    "script-src": true,
                    "style-src": false,
                },
            }
        )
    ],
};

if (isDevelopment) {
    webpackConfig.devtool = 'inline-cheap-module-source-map';
}

module.exports = webpackConfig;

Answer 1

在我的例子中，问题是默认 webpack websocket 和代理中的掩码同名 (

/ws

)。在蒙版中添加新片段很有帮助，我得到的是

“/ws/**”

，而不是

“ws/api/**”

。

{
    context: [
        "/ws/api/**",
        "/stream/ws/**"
    ],
    target: "wss://my-instance.com",
    ws: true,
    secure: false,
    changeOrigin: true,
},