Question

在我的React应用中，建立连接大约一分钟后出现以下错误：

The development server has disconnected.
Refresh the page if necessary.

如果我刷新，它将再次连接，仅在一分钟后断开连接。

Webpack是通过create-reac-app安装的。

这是我的package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-alert": "^5.5.0",
    "react-dom": "^16.8.6",
    "react-hot-loader": "^4.5.3",
    "react-html-parser": "^2.0.2",
    "react-player": "^1.13.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^3.3.0",
    "react-transition-group": "^4.3.0",
    "spotify-web-api-js": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2"
  }
}

我使用nginx代理反向，具有以下配置：

server {

  listen 80;

  location / {
    proxy_pass        http://client:3000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }

  location /users {
    proxy_pass        http://web:5000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }
}

如果我转到http://localhost:3000/，则不会遇到问题，因此它必须与代理有关。

日志：

client_1 ℹ ｢wds｣: Project is running at http://171.13.0.12/
client_1 ℹ ｢wds｣: webpack output is served from /
client_1 ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
client_1 ℹ ｢wds｣: 404s will fallback to /index.html
Starting the development server...

这是我的webpack.config.js文件：

https://pastebin.com/HF78WjLL

编辑：我已尝试根据以下答案将我的网络添加到package.json，如下所示：

"scripts": {
    "start": "HOST='0.0.0.0' react-scripts start",
    ...,
  }

但是仍然存在相同的错误，就像以前一样：它会连接并迅速断开连接。

该如何解决？

Answer 1

嗯，react-scripts 3.3.0确实是代理的问题。

根据最近的问题：https://github.com/facebook/create-react-app/issues/8203，

这与nginx的默认proxy_read_timeout 60年代规则有关。似乎react-scripts以前的版本会在60秒后超时时重新加载websocket连接。

因此，将以下几行添加到nginx的dev.conf中，如下所示：

location / {
    proxy_pass        http://client:3000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;

    # the following two timeout rules fix CRA WDS disconnects after 60s
    proxy_read_timeout 86400s;
    proxy_send_timeout 86400s;
  }

解决了问题。

Answer 2

默认情况下，webpack开发服务器在本地主机上运行。仅可从容器内部访问Localhost。为了使它可以从主机（即在容器外部）进行访问，您需要使webpack在可公开访问的地址STATION YEARS NYEAR 0 A [1990, 1994, 1995, 1996, 1998, 2000] 2 1 B [1992, 1995, 2001] 1 2 C [1988, 1989] 0上为捆绑包提供服务。

将此添加到您的配置中：

0.0.0.0

带代理的Webpack-开发服务器已断开连接

2 个答案: