尝试将自定义 mqtt 代理与 react 和 typescript 连接时出错答案

【问题标题】：Error when trying to connect custom mqtt broker with react and typescript尝试将自定义 mqtt 代理与 react 和 typescript 连接时出错
【发布时间】：2022-12-10 04:43:57
【问题描述】：

我正在使用 mqtt.js 并试图让我的自定义 MQTT 代理连接到反应中的 SSL 认证，但失败并在控制台中出现以下错误：

WebSocket connection to 'wss:xxx:1884/' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

使用代码：

TRUSTED_CA_LIST,key and cert are strings
const options = {
  username: "username",
  password: "password",
  clientId:"id",
  port: 1884,
  key: KEY,
  cert: CERT,
  rejectUnauthorized: false,
  // The CA list will be used to determine if server is authorized
  ca: TRUSTED_CA_LIST,
  protocol: 'mqtt'
}
  const client  = mqtt.connect("ssL://brokerurl:1884",options);

  "dependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "mqtt": "^4.3.7",
    "mqtt-react-hooks": "^3.0.0-alpha.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.9.3",
    "web-vitals": "^2.1.4"

使用的浏览器：microsoft edge

上面的代码，我在示例下的 mqtt.js 中找到它并根据我的需要修改它，代理 url 最初以 ssl:xx 开头，但在浏览器的控制台中它以 wss:xx 失败，这让我感到困惑。任何帮助表示赞赏。

【问题讨论】：

标签： node.js reactjs ssl mqtt mqtt.js

【解决方案1】：

您不能覆盖受信任的 CA 证书的 Web 浏览器列表。

ca 选项仅在将 MQTT.js 库与 nodejs 一起使用时才有效。

如果您想使用自签名或私有 CA 来验证证书，则需要将其导入到浏览器的信任库中。

由于 JavaScript 沙箱，您也只能从浏览器使用 WebSockets 或安全 WebSockets。

【讨论】：