如何解决错误："[WDS] Disconnected!"

Question

我现在开始学习ReactJs。但是，我在控制台中遇到了以下错误，而终端没有显示：

[WDS] Disconnected!sock.onclose @ client?64c0:70EventTarget.dispatchEvent @ eventtarget.js:49(anonymous function) @ main.js:356

abstract-xhr.js:128 GET http://127.0.0.0/sockjs-node/info?t=1461853324372 net::ERR_CONNECTION_TIMED_OUT

它正在寻找“sockjs-node”，我已经本地和全局安装了它，但没有变化。它不应该搜索“node_modules”文件夹吗？

这是我的配置：

var webpack = require("webpack");
var path = require("path");


module.exports = {
    
    devtool: "inline-source-map",
    entry: [
        "webpack-dev-server/client?http://127.0.0.0/",
        "webpack/hot/only-dev-server",
        "./src"
    ],
    devServer: {
        contentBase: "./public",
        hot: true,    
        inline: true,
        quiet: false,
        noInfo: true,
        stats: { colors: true }
    },
    output: {
        path: path.join(__dirname, "./public"),
        filename: "./assets/js/bundle.js"
    },
    resolve: {
        modulesDirectrories: ["node_modules", "src"],
        extentions: ["", ".js"]
    },
    module : {
        loaders: [
            { 
                test: /\.jsx?$/,
                exclude: "/node_modules/",
                loaders: ["react-hot-loader", "babel?presets[]=react,presets[]=es2015"] 
            }, 
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }, 
            {
                test: /\.gif$/,
                loader: "url-loader?mimetype=image/png"
            }, 
            {
                test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
                loader: "url-loader?mimetype=application/font-woff"
            }, 
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
                loader: "file-loader?name=[name].[ext]"
            }
        ]
    },
    plugins: [ 
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("development")
            }
        })
    ]

}

- meji

---

你的应用程序正在8080端口上运行，但是你的HMR正在80端口上监听。尝试使用以下代码："webpack-dev-server/client?http://127.0.0.0:8080/" - lux

谢谢Lux...现在已经获得了套接字模块。但仍然显示“[WDS]断开连接!” - meji

哼，我的输入看起来完全一样，只是我使用 localhost 而不是本地 IP：entry = [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/bootstrap' ] - lux

我的简单React样板文件：https://github.com/mikechabot/react-boilerplate npm install -> npm start - lux

Answer 1

我这样修复了它：

原始状态：

  entry: [
    "webpack-dev-server/client?http://localhost:9090",
    "webpack/hot/only-dev-server",
    "./src/app"
  ],

待办事项：

  entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080",
    "webpack/hot/only-dev-server",
    "./src"
  ],

- VvV

---

被修改的部分有一个不同的端口号，但对我来说，问题只是通过将localhost替换为IP地址就解决了。 - Michael Domashchenko

Answer 2

对我而言，当我在项目根目录下创建了一个文件vue.config.js并添加以下内容时，问题得到了解决：

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

- Arlei F. Farnetani Junior

---

从文档中得知："不建议这样做，因为没有检查主机的应用程序容易受到DNS重绑定攻击的威胁。" - Luca Fagioli

在较新的版本中，使用：allowedHosts: "all"（参见：https://webpack.js.org/configuration/dev-server/#devserverallowedhosts） - undefined

Answer 3

我遇到了同样的错误，因为我的Webpack配置为在 localhost:3000 上提供服务，但我有一个本地端口重定向从 80 到 3000，我正在使用http://localhost/ 访问开发应用程序。但在网络检查器中，我注意到WDS仍在查询 http://localhost:3000/sockjs-node/info?...，并超时。

解决方案是告诉Webpack你的应用程序的“公共”地址，在我的情况下是这样：

devServer: {
      https: false,
      port: 3000,
      public: 'http://localhost:80'
    }

（注：public中的:80部分是可选的，因为80是默认端口，但添加它可以清楚地表明3000是被服务的端口，80是被重定向到的端口。）

（不要问我为什么不直接使用port: 80，这很复杂。但我希望我的答案能够帮助像我这样的人。）

- Bence Szalai

Answer 4

问题似乎是您在url中没有包含端口号 webpack-dev-server/client?http://127.0.0.0/

请将其更改为：

entry: [
    "webpack-dev-server/client?http://127.0.0.0/",
    "webpack/hot/only-dev-server",
    "./src"
],

To:

entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080/",
    "webpack/hot/only-dev-server",
    "./src"
],

- Paras Dahal

---

这个答案对我有用 https://dev59.com/AlQK5IYBdhLWcg3wDLkw#53631238 - Josh

Answer 5

2022年更新

正如其他人所提到的，这是一个与webpack-dev-server有关的问题。问题很可能是您环境中的主机或端口不匹配造成的。

解决方法很简单-更新您的Webpack配置（例如，webpack.config.js）以允许所有主机：

devServer: {
  ...
  allowedHosts: ['all'],
  ...
},

由于这会禁用重要的安全保护措施，请勿在生产环境中使用此设置（更多信息）。

- rinogo

---

也许那个粗体句子不太对 ;) - Torque

Answer 6

在我们的情况下，问题是由于webpack-dev-server用于提供资源的主机名与应用程序运行的主机名不匹配所致。

具体来说，我们的本地应用程序是从https://dev.resumize.me运行的，但是webpack-dev-server正在从127.0.0.1提供资源。

您可以使用选项--host控制webpack-dev-server使用的主机名。因此，在我们的情况下，我们必须使用以下命令启动它： webpack-dev-server.js --host dev.resumize.me --https 希望这可以帮助您。

- Luca Fagioli

---

谢谢！我通过ngrok（隧道服务）运行我的站点。了解--host选项有帮助。但我可以指定多个主机吗（例如localhost和mytunnel.ngrok.com）？ - morgler

@morgler，恐怕您不能指定多个主机。 - Luca Fagioli

Answer 7

我正在使用Angular，并将Webpack服务器用作开发依赖。我正在寻找答案，但没有找到合适的答案。

注意：这只是一种解决方法，而不是实际问题的修复

打开以下文件

YOUR_PROJECT_ROOT\node_modules\webpack-dev-server\client\index.js

在方法onSocketMsg中，在函数ok()下注释掉reloadApp()这一行。

这可以防止应用程序不断重新加载。即使您进行更改，也可以阻止应用程序重新加载。但是您始终可以手动重新加载浏览器，以反映您的更改。

- Rahul kalivaradarajalu

Answer 8

在 `development.js` 文件中尝试使用以下设置来配置 `dev_server`:

dev_server: {
    host: '127.0.0.0'
    port: 8080
    https: false
    disableHostCheck: true
}

- k1r8r0wn

Answer 9

我这样修复了它：

  devServer: {
    host: '0.0.0.0',
    https: false,
    port: 8080,
    public: 'http://0.0.0.0:8080'
  },  

- HyperActive

Answer 10

在 webpack 配置文件中：修改 devServer 并添加：

{ 
  disableHostCheck: true,
  transportMode: 'ws',
  injectClient: false
} 

像下面这样就可以工作：

devServer: {
  contentBase: "./public",
  hot: true,    
  inline: true,
  quiet: false,
  noInfo: true,
  stats: { colors: true }
  disableHostCheck: true,
  transportMode: 'ws',
  injectClient: false
}

这对我有用。

- M Sajid Mansoori