是否可以使用 Socket.io 将 AWS WebSocket API 连接到 Webflow？

Question

我有一个 WebSocket API 设置，具有使用 lambda 函数托管服务器的双向通信集成。当我尝试运行我发布的网站时，出现此错误：

从源“https://NAMEOFWEBSITE.webflow”访问“https://z84fa4t7k2.execute-api.us-east-2.amazonaws.com/socket.io/?EIO=4&transport=polling&t=OzKEsbo”处的 XMLHttpRequest。 io' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

这是代码：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const awsServerlessExpress = require('aws-serverless-express');

const app = express();
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  next();
});
const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: "https://NAMEOFWEBSITE.webflow.io/",
    allowedHeaders: ["Access-Control-Allow-Origin"],
    credentials: true
  }
});

// Handle socket connections
io.on('connection', (socket) => {
  console.log('A user connected');
  
  socket.emit("hello", "world");
});

const serverExpress = awsServerlessExpress.createServer(app);

exports.handler = (event, context) => {
  awsServerlessExpress.proxy(serverExpress, event, context);
};

这是我在 Webflow 中嵌入的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    var socket = io('wss://z84fa4t7k2.execute-api.us-east-2.amazonaws.com/ChatFunctionality/', {
      withCredentials: true,
      extraHeaders: {
        "Access-Control-Allow-Origin": "*"
      }
    });
    
    socket.on("hello", (arg) => {
        console.log(arg);
    });
  });
</script>

请原谅那些混乱/可能不必要的代码，我一直在尝试多种事情并询问 chatgpt，这并不总是有帮助，但总是充满信心，哈哈。

大家的解决方案好像都是加上这个：

const io = socketIo(server, {
  cors: {
    origin: "*",
  }
});

但这也不起作用，同样的错误。

我需要通过 webflow 实现套接字吗？

Answer 1

所以在阅读完你的问题后，我有了这个解决方案希望它对你有用

app.use(function(req,res,next){
res.header("Access-control-Allow-Origin","*");
res.header("access-Control-Allow-Headers", "origin, X-Requested-with, content-type,Accept");
res.header("Access-controll-Allow-Methods","PUT, GET,POST,DELETE,OPTIONS");
next();
});

const io = socketIo(server,{
cors:{
Origin: "http://Name.webflow.io",
methonds: ["GET", "POST"],
allowedHeaders:["Access-Control-Allow-Origin"],
credential:true
}
});`