在沒有使用任何 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