Socket.io 阻止加载混合活动内容错误

Question

我有一个正在构建的聊天应用程序，它可以在离线状态下正常工作，但在生产环境中，它拒绝连接并在浏览器中发出此错误。

Blocked loading mixed active content这里是后端app.js的代码

 const http = require("http");
const express = require("express");
const app = express();
const path = require("path");
const server = http.createServer(app);
const dotenv = require("dotenv").config();
const router = require(path.join(__dirname + "/modules/router.js"));
const mongoose = require("mongoose");
const URL = process.env.DB_URL;
const Schema = require(path.join(__dirname + "/modules/Schema.js"));
const io = require("socket.io")(server, {
  cors: {
    origin: "*",
  },
});
app.use(router);
mongoose.connect(URL, (err) => {
  if (err) throw err;
  else {
    server.listen(process.env.PORT, console.log("Server is running"));
  }
});

io.on("connection", (socket) => {
  let payload = socket.handshake.auth.$token;
  socket.emit("thru", true);
  socket.on("join", async (link, cb) => {
    // Checking users
    Schema.Link.findOne({ code: link }, (err, d) => {
      if (err || d == " ") cb(false, false);
      else {
        if (d.onlineUsers.length < 2) {
          if (d.onlineUsers.includes(payload)) {
            cb(true, true);
          } else {
            // Adding user
            d.onlineUsers.unshift(payload);
            Schema.Link.findOneAndUpdate(
              { code: link },
              { onlineUsers: d.onlineUsers },
              (err, x) => {
                if (err || x == "") cb(false, false);
                else {
                  if (x.onlineUsers.length == 1) cb(true, true);
                  else cb(true, false);
                }
              }
            );
          }
        } else cb(false, false);
      }
    });
    socket.join(link);
    socket.broadcast.to(link).emit("online", true);
    socket.on("message", (m, cb) => {
      m.date = new Date();
      socket.broadcast.to(link).emit("broadcast", m);
      cb(m);
    });
  });
  socket.on("disconnect", (data) => {
    const $link = socket.handshake.auth.$link;
    Schema.Link.findOne({ code: $link })
      .then((x) => {
        if (x == "") console.log("user not found");
        else {
          let n = x.onlineUsers.filter((c) => c !== payload);
          Schema.Link.findOneAndUpdate(
            { code: $link },
            { onlineUsers: n },
            (err) => {
              if (err) console.log(err);
              else {
                socket.broadcast.to($link).emit("online", false);
              }
            }
          );
        }
      })
      .catch((e) => {
        console.log("Ending", e);
      });
  });
});

这是前端聊天屏幕

  useEffect(() => {
    try {
      socket.current = io("http://chatterbox-v2-api.vercel.app", {
        auth: {
          $token: localStorage.getItem("senders_token"),
          $link: link,
        },
      });
    } catch (err) {
      console.log("Error");
    }

我试过在另一个平台上托管 scoket 服务器，但没有。

Answer 1

我认为这里的问题是您正试图从提供 HTTPS 的页面访问 HTTP 服务器 ( http://chatterbox-v2-api.vercel.app )，这会触发“阻止加载混合活动内容”错误。

参考： https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

您的服务器是否可用 HTTPS ( https://chatterbox-v2-api.vercel.app )？