J'ai une application réalisée avec React, Node.js et Socket.io

J'ai déployé le backend Node sur Heroku et le frontend sur Netlify

Je sais que les erreurs CORS sont liées au serveur, mais peu importe ce que j'ajoute, cela ne résout pas l'erreur dans l'image ci-dessous.

J'ai également ajouté le script proxy en tant que "proxy" dans le package.json de React : "https://googledocs-clone-sbayrak.herokuapp.com/"

Voici mon server.jsfichier ;

const mongoose = require('mongoose');
const Document = require('./Document');
const dotenv = require('dotenv');
const path = require('path');
const express = require('express');
const http = require('http');
const socketio = require('socket.io');
dotenv.config();

const app = express();
app.use(cors());
const server = http.createServer(app);
const io = socketio(server, {
  cors: {
    origin: 'https://googledocs-clone-sbayrak.netlify.app/',
    methods: ['GET', 'POST'],
  },
});

app.get('/', (req, res) => {
  res.status(200).send('hello!!');
});

const connectDB = async () => {
  try {
    const connect = await mongoose.connect(process.env.MONGODB_URI, {
      useUnifiedTopology: true,
      useNewUrlParser: true,
    });

    console.log('MongoDB Connected...');
  } catch (error) {
    console.error(`Error : ${error.message}`);
    process.exit(1);
  }
};

connectDB();


let defaultValue = '';

const findOrCreateDocument = async (id) => {
  if (id === null) return;

  const document = await Document.findById({ _id: id });

  if (document) return document;

  const result = await Document.create({ _id: id, data: defaultValue });
  return result;
};
io.on('connection', (socket) => {
  socket.on('get-document', async (documentId) => {
    const document = await findOrCreateDocument(documentId);
    socket.join(documentId);
    socket.emit('load-document', document.data);
    socket.on('send-changes', (delta) => {
      socket.broadcast.to(documentId).emit('receive-changes', delta);
    });

    socket.on('save-document', async (data) => {
      await Document.findByIdAndUpdate(documentId, { data });
    });
  });
  console.log('connected');
});

server.lis ten(process.env.PORT || 5000, () =>
  console.log(`Server has started.`)
);

C'est ici que je fais des requêtes au frontend ;

import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import { useParams } from 'react-router-dom';
import { io } from 'socket.io-client';

const SAVE_INTERVAL_MS = 2000;
 

const TextEditor = () => {
  const [socket, setSocket] = useState();
  const [quill, setQuill] = useState();
  const { id: documentId } = useParams();

  useEffect(() => {
    const s = io('https://googledocs-clone-sbayrak.herokuapp.com/');
    setSocket(s);
     

    return () => {
      s.disconnect();
    };
  }, []); 

 /* below other functions */
 /* below other functions */
 /* below other functions */
 }