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

Question

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

建筑学

1. 客户端 - React JS / Mui 客户端文件
2. 服务器 - 节点 - MySQL - Express 框架
3. Ubuntu

网络

1. 端口 443 转发，即在 https://myIp:443 或 http://myIP:443 上发出的所有请求都会到达我家。
2. 是的，我有一个域，即https://www.example.in或https://example.in
3. 使用 Cloudflare 管理域流量。

As you may know cloudflare only accepts port 443, 2053, 2083 etc as secure https ports, I was forced to change reactjs default port from 3000 to 2053, as linux does not allow ports below 1000 to be used by non root user. 在我的机器上，我已经配置了，所有从外部到端口 443 的请求都被重定向到端口 2053。

交通顺序

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

客户端架构

现在默认情况下，只要你在http://localhost:3000开始输入 npm ，react js 就会启动 localhost。 由于上述原因，我不得不将其更改为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 或套接字 io 之类的东西，为什么会触发此错误控制台消息？ 我究竟做错了什么。 PLZ告诉:(

Answer 1

这是一个很好的问题！ 感谢分享

直截了当： 文档明确指出

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

还有：

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

自己配置代理

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

另请注意，如果您使用的是安全连接，您还需要管理有效的证书（或使用可以提供证书的管理解决方案）

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

我希望你满意，因为这个答案的devOps将更多关于生产配置而不是开发指南的 devOps