將 socket.io(^3.0.0) 與 Strapi Server("3.2.5") CORS 錯誤集成

Question

我正在嘗試構建一個簡單的聊天應用程序。 我在前端使用 create-react-app，我正在嘗試將 socket.io 與 Strapi 服務器集成。 我的 create-react-app 服務器在端口 3000 上運行，而我的 Strapi 本地服務器在端口 1337 上運行。

我已經使用這個命令來安裝 starpi yarn create strapi-app chat-app並手動選擇mongodb作為數據庫。

在 React 應用程序中收到此錯誤：

代碼

在我的 React 組件上，我有這個：

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

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

在 Strapi 后端，在./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;
      })
};

我知道使用 cors 模塊在節點應用程序中解決這個cors錯誤，並像app.use(cors())一樣使用它，但不知道在 Strapi 的情況下我如何解決這個問題？

我遵循了這個線程並嘗試了一些解決方法，但它們似乎都不起作用。 我該如何解決這個問題？

Answer 1

所以我通過向 socket.io 提供 cors 對象來解決這個問題。 選項origins已在最新版本的 socket.io(3.0.0) 中替換為cors

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

查看套接字遷移指南以獲取更多信息：

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

我現在可以在后端接收消息了。 謝謝，艾莉亞！