Socket.io Blocked loading mixed active content Error

Question

I have a chat app i'm building, it works fine offline but in production, it refuses to connect and it gives out this error in the browser.

Blocked loading mixed active content here is the code for the back end 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);
      });
  });
});

And here is the front end chat screen

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

i've tried hosting the scoket server on another platform but nothing.

Answer 1

I think the problem here is that you are trying to reach a HTTP server ( http://chatterbox-v2-api.vercel.app ) from a page served with HTTPS, which triggers an "Blocked loading mixed active content" error.

Reference: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

Is your server available with HTTPS ( https://chatterbox-v2-api.vercel.app )?