【问题标题】：Integrating socket.io(^3.0.0) with Strapi Server("3.2.5") CORS Error将 socket.io(^3.0.0) 与 Strapi Server("3.2.5") CORS 错误集成
【发布时间】：2021-02-21 01:39:03
【问题描述】：

我正在尝试构建一个简单的聊天应用程序。我正在使用 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()) 一样使用它，但不知道如何解决这个问题？

我关注了this thread 并尝试了一些解决方法，但似乎都没有奏效。我该如何解决这个问题？

【问题讨论】：

能否添加后端代码
我正在使用的strapi后端代码已经在问题的上方。您需要任何特定的代码吗？
你试过用cors模块app.use(cors()); app.use(function (req, res, next) { res.header("Access-Control-Allow-Origin", '*'); res.header("Access-Control-Allow-Credentials", true); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json'); res.header("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"); next(); });
我知道 nodejs 内部的 cors 问题，知道如何在 Node.js 中解决它。不知道如何在 Strapi CMS 中实现相同的效果。我试过require('socket.io')(strapi.server, { origins: "*" })，但这也不起作用
github.com/strapi/strapi/issues/3640 你试过这个还是 var http = require('http').Server(app); const io = require('socket.io')(http, { origins: '*:*'}); 并且你使用的是 socket 3.0.0 很多东西在这个版本中已经改变了检查这个更新日志github.com/socketio/socket.io/blob/master/CHANGELOG.md

标签： node.js reactjs socket.io cors strapi

【解决方案1】：

所以我通过向我的 socket.io 提供 cors 对象解决了这个问题。在 socket.io(3.0.0) 的最新版本中，选项 origins 已替换为 cors

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

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

【讨论】：