How To Make Socket Connection To Heroku Server In Socket.io?

Question

I'm made a full stack mern application and hosted the nodejs backend in heroku and the frontend is running on netlify. All.env variables are set up both for heroku and netlify, I set up cors() also. The website has chat functionality so I use socket.io for that which that used to work nice in development.

This is link to my heroku server (backend api) https://ural-shop.herokuapp.com/

In messenger.js file (This is where the socket connections happens)

import React, { useEffect, useState, useRef } from "react";
import io from "socket.io-client";

const socketRef = useRef();

useEffect(() => {
      socketRef.current = io.connect("https://ural-shop.herokuapp.com/");
},[]);

index.js file (main file of backend)

const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const socket = require("socket.io");

app.use(cors());

const io = socket(server, {
  cors: { origin: "https://ural-shop.herokuapp.com/" },
});

server.listen(PORT, () => console.log(`Server on port ${PORT}`));

I only put the neccessary parts of the files.

From google developer console I see this.

Developer Console Output

Error From Network Section Of Developer console

Answer 1

Looking at your screenshot it looks like you've not configured cors correctly on your backend. Either put * as value so requests from anywhere are allowed, or put the URL of your frontend application instead of the URL of your backend API. ( https://ural-shop.herokuapp.com/ is what you've configured and it should be the URL of your frontend application)

Let me know if it worked.

Answer 2

I had the same issue with the same tech stack. And this took me 3 days to find out this was all CORS issue. But you need to include your Heroku server in your CORS whitelist.

According to the official docs:

Since Socket.IO v3, you need to explicitly enable Cross-Origin Resource Sharing (CORS).

client-site

So, everything you have to do is to specify the correct URL according to the environment. If you want to set only with the production URL, it will work both in the local or prod environment.

Mine is dynamic like this:

const IS_PROD = process.env.NODE_ENV === "production";
const URL = IS_PROD ? "yoursite.herokuapp.com" : "http://localhost:5000";
const socket = io(URL);

server-side

...
const io = socket(server, {
        cors: {
            origin: ["http://localhost:3000", "yoursite.herokuapp.com"],
        },
    });

Very important : You also have to make sure that you development is in sync with your production side. Otherwise, you will test it and see the same error, but only because you didn't update your production, too. Yep, this kind of silly mistakes can happen...

Hope that helps someone in the same situation. This solved my issue.