在未使用任何websocket的情况下获取websocket错误消息

Question

我正在制作一个简单的基于REST的Express-React Node-MySQL堆栈。

架构

1. 客户端-响应JS / Mui客户端文件
2. 服务器-节点- MySQL -快捷框架
3. Ubuntu

网络

1. 443港口转发，即所有在https://myIp:443或http://myIP:443土地上提出的请求到我家。
2. 是的，我有一个域名，即https://www.example.in或https://example.in
3. 使用Cloudflare管理域通信量。

正如您可能知道的，cloudflare只接受端口443、2053、2083等作为安全的https端口，我被迫将reactjs默认端口从3000更改为2053，因为linux不允许非root用户使用1000以下的端口。在我的机器中，我配置了从外部向端口443发出的所有请求都被重定向到端口2053。

交通序列

https://example.in -> https://myIP:443 ->重定向-> https://myIP:2053。

客户端架构

现在默认情况下，只要在http://localhost:3000.上输入npm ，js就会启动本地主机。由于上述原因，我不得不将其更改为https://localhost:2053。

我是怎么做到的？

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:2083",
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
    "@fortawesome/free-regular-svg-icons": "^6.0.0-beta3",
    "@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.2.7",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "js-cookie": "^3.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-google-recaptcha-v3": "^1.9.7",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "recaptcha-v3": "^1.10.0",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "HTTPS=true PORT=2053 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这一行=> "start": "HTTPS=true PORT=2053 react-scripts start",

现在让我们来看看哪里出了问题。

当我启动客户机/reactjs时，浏览器控制台就会发生这种情况。

​

​

我没有使用任何websocket或socket之类的东西，为什么会触发这个错误控制台消息？我做错什么了。请讲:(

Answer 1

这是个很棒的问题！感谢您的分享

关键是：文档清楚地指出

代理选项支持HTTP、HTTPS和WebSocket连接。

还指出：

如果代理选项不够灵活，您也可以：

自己配置代理

我知道..这不是一个很好的选择，但-使用这个选项是生产也不理想。大多数情况下，您的应用程序将通过一个真正的服务器或API网关提供固定地址或有效域。

还请注意，如果您使用的是安全连接，您还需要管理有效的证书(或者使用将提供一个证书的管理解决方案)。

简单地说，：生产和开发有不同的配置集，因此在生产中您将使用不同的配置，并且不会出现此错误。此错误可能仅在使用此特定配置的开发模式中生成。

我希望这能让您满意，因为这个答案的其余部分将是关于生产配置的更多devOps，而不是开发指南。