将 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/

我现在可以在后端接收消息了。 谢谢，艾莉亚！