能否通过Socket.io连接AWS WebSocket API与Webflow？CORS问题求助

从源'https://NAMEOFWEBSITE.webflow.io'访问'https://z84fa4t7k2.execute-api.us-east-2.amazonaws.com/socket.io/?EIO=4&transport=polling&t=OzKEsbo'的XMLHttpRequest被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>

注：代码可能存在冗余，已尝试多种方法（包括设置socket.io的cors.origin为"*"）但均无效，仍出现相同错误。请问是否有针对Webflow的Socket.io集成特殊方法？

1. 核心问题定位 #

你当前的代码存在两个关键问题：

• 冗余的Express CORS中间件与Socket.io的CORS配置冲突，且后者未被正确应用
• awsServerlessExpress代理的是单独的Express实例，而非Socket.io绑定的HTTP服务器，导致Socket.io的CORS规则完全未生效

2. 代码修复步骤 #

后端代码调整

移除冗余的Express CORS中间件，确保awsServerlessExpress代理的是Socket.io绑定的HTTP服务器：

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

const app = express();
const server = http.createServer(app);

// 统一用Socket.io配置CORS，去掉末尾斜杠避免匹配问题
const io = socketIo(server, {
  cors: {
    origin: "https://NAMEOFWEBSITE.webflow.io",
    methods: ["GET", "POST", "OPTIONS"],
    allowedHeaders: ["Content-Type"],
    credentials: true
  }
});

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

// 关键：传入Socket.io绑定的server创建代理实例
const serverExpress = awsServerlessExpress.createServer(app, server);

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

前端代码调整

移除不必要的extraHeaders（前端无需发送Access-Control-Allow-Origin头），改用HTTP协议初始化连接（Socket.io会自动升级为WebSocket）：

<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('https://z84fa4t7k2.execute-api.us-east-2.amazonaws.com/ChatFunctionality/', {
      withCredentials: true
    });
    
    socket.on("hello", (arg) => {
        console.log(arg);
    });
  });
</script>

3. Webflow额外注意事项 #

• 确认Webflow发布后的域名与后端CORS配置的origin完全一致，无拼写或斜杠差异
• 若仍存在问题，可在AWS API网关层面补充配置CORS：
  • 进入对应API网关的ChatFunctionality阶段
  • 开启CORS，设置允许的Origin为https://NAMEOFWEBSITE.webflow.io，允许Methods包含OPTIONS、GET、POST

内容的提问来源于stack exchange，提问作者BugWarrior