继续让 [WDS] 断开连接！错误

Posted 2023-02-22

【中文标题】继续让 [WDS] 断开连接！错误

【英文标题】：Keep getting [WDS] Disconnected! error

【发布时间】：2016-08-23 09:33:10

【问题描述】：

我目前正在开始使用 ReactJs。但是，我在控制台中遇到了以下错误，这些错误未在终端中显示：

[WDS] Disconnected!sock.onclose@client?64c0:[e-mail]:49(匿名函数)@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")
            
        )
    ]

任何帮助表示赞赏，并提前致谢。

【问题讨论】：

您的应用在端口 8080 上运行，但您的 HMR 正在侦听端口 80。试试这个："webpack-dev-server/client?http://127.0.0.0:8080/"

感谢 lux... 现在它得到了套接字模块。但是仍然显示“[WDS] Disconnected!”

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

我的简单反应样板：github.com/mikechabot/react-boilerplatenpm install -> npm start

【参考方案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"
  ],

【讨论】：

未来部分的端口号不同，但对我来说，只需将 localhost 替换为 IP 地址即可解决问题。

【参考方案2】：

对我来说，当我在根项目中创建文件时解决了：vue.config.js，内容如下：

module.exports = 
  devServer: 
    disableHostCheck: true
  

【讨论】：

来自docs：“不建议这样做，因为不检查主机的应用容易受到 DNS 重新绑定攻击。”

【参考方案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，这很复杂。但我希望我的回答有一天能对像我这样的人有所帮助。）

【参考方案4】：

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

改变这个

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

收件人：

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

【讨论】：

这个答案对我有用***.com/a/53631238/5403449

【参考方案5】：

在我们的案例中，问题是由于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

希望这会有所帮助。

【讨论】：

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

@morgler 恐怕你不能指定多个主机。

【参考方案6】：

在development.js 文件中尝试对dev_server 使用以下设置：

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

【参考方案7】：

我正在使用 Angular，并且我使用 webpack 服务器作为开发依赖项。我一直在寻找答案，但找不到适合我的答案。

注意：这只是一种解决方法，不能解决实际问题

打开以下文件

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

在 onSocketMsg 方法中，在 function ok() 注释下 reloadApp() 行。

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

【参考方案8】：

这将通过启用错误覆盖来解决，

overlay:true 在devServer 对象中再包含一个属性

devServer: 
    overlay: true,
    contentBase: "./public",
    hot: true,    
    inline: true,
    quiet: false,
    noInfo: true,
    stats:  colors: true 

更改 webpack.config.js 后

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: 
        overlay: true,
        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")
            
        )
    ]

【参考方案9】：

我是这样解决的：

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

【参考方案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

它对我有用。

【参考方案11】：

你不需要改变webpack.config.js

尝试修复package.json（在端口 3000 上启动 server 而不是 standard 8080）：

"start": "./node_modules/.bin/webpack-dev-server --host localhost --port 3000 --content-base src --inline --hot",

【讨论】：

这对我不起作用。你能解释一下为什么它会有所作为吗？

【参考方案12】：

在index.htm更改路径：

   <link rel="stylesheet" href="./main.css">
   <script src="./main.js"></script>

到

   <link rel="stylesheet" href="/main.css">
   <script src="/main.js"></script> 

【讨论】：

此答案被否决，因为它仅适用于您和您当前的设置。它没有解释 WDS 断开连接问题或如何修复它。