将 socket.io(^3.0.0) 与 Strapi Server("3.2.5") CORS 错误集成

Question

I'm trying to build a simple chat app. I'm using create-react-app for the front-end, and I'm trying to integrate socket.io with Strapi server. My create-react-app server is running on Port 3000, while my Strapi local server is running on port 1337.

I've used this command to install starpi yarn create strapi-app chat-app and manually selected mongodb as database.

Receiving this error in the React app:

Code

On my React component, I have this:

import io from 'socket.io-client';
const socket = io('http://localhost:1337');

 const handleClick = () => {        
        const username = props.username;
        socket.emit("sendMessage", {
            chatMessage,
            username
        })
    }

In the Strapi backend, inside ./config/functions/bootstrap.js

module.exports = async () => {
    process.nextTick(() => {
        var io = require('socket.io')(strapi.server);

        strapi.io.on('connection', async function(socket) {

            socket.on('sendMessage', (msg) => {
                console.log("msg is", msg)
            })
            socket.on('disconnect', () =>{
                console.log('a user disconnected')
            });
        });
         strapi.io = io;
      })
};

I know to solve this cors error inside node app using cors module and use it like app.use(cors()) But not sure how I resolve this in case of strapi?

I followed this thread and tried some of the workarounds, but none of them seem to work. How do I resolve this issue?

Answer 1

So I resolved this issue by providing cors object to my socket.io. Option origins have been replaced with cors in the lastest version of socket.io(3.0.0)

    var io = require('socket.io')(strapi.server, {
            cors: {
              origin: "http://localhost:3000",
              methods: ["GET", "POST"],
              allowedHeaders: ["my-custom-header"],
              credentials: true
            }
   });

Checkout the socket migration guide for more info:

https://socket.io/docs/migrating-from-2-x-to-3-0/

I'm able to receive messages in the backend now. Thanks, Arya!