使用Socket.io搭配Ngrok时遭遇CORS错误求助

问题根源 #

你遇到的错误核心是：当前请求的Ngrok域名不在你配置的允许Origin列表中，导致服务端默认返回了Access-Control-Allow-Origin: *，而当请求携带凭证（withCredentials: true）时，浏览器不允许*作为允许的Origin，直接拦截了请求。

你的CORS配置只包含了本地和局域网地址，但其他用户通过Ngrok访问时，实际请求的是https://a29a-41-109-30-183.ngrok-free.app，这个域名不在允许列表里，触发了 fallback 逻辑。

解决方案 #

1. 临时添加Ngrok域名到允许列表

直接把当前Ngrok的域名加入Express和Socket.io的CORS配置中：

修改Express的CORS配置：

app.use(
  cors({
    origin: ["http://localhost:5173", "http://192.168.1.6:5173", "https://a29a-41-109-30-183.ngrok-free.app"],
    credentials: true,
  })
);

修改Socket.io的CORS配置：

const server = http.createServer(app);
const io = new SocketIOServer(server, {
  cors: {
    origin: ["http://localhost:5173", "http://192.168.1.6:5173", "https://a29a-41-109-30-183.ngrok-free.app"],
    credentials: true,
  },
});

2. 动态适配Ngrok域名（避免每次重启Ngrok都修改配置）

如果Ngrok每次启动都会生成新域名，可以用动态验证逻辑，允许所有ngrok-free.app后缀的域名：

Express动态CORS配置：

app.use(
  cors({
    origin: (origin, callback) => {
      const allowedLocalOrigins = ["http://localhost:5173", "http://192.168.1.6:5173"];
      // 允许本地地址、局域网地址，以及所有ngrok-free.app域名
      if (!origin || allowedLocalOrigins.includes(origin) || origin.endsWith(".ngrok-free.app")) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
    credentials: true,
  })
);

Socket.io动态CORS配置：

const server = http.createServer(app);
const io = new SocketIOServer(server, {
  cors: {
    origin: (origin, callback) => {
      const allowedLocalOrigins = ["http://localhost:5173", "http://192.168.1.6:5173"];
      if (!origin || allowedLocalOrigins.includes(origin) || origin.endsWith(".ngrok-free.app")) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
    credentials: true,
  },
});

额外注意事项 #

• 确保客户端的backend_url_socket变量指向的是Ngrok的完整地址（https://a29a-41-109-30-183.ngrok-free.app），而非本地地址。
• 生产环境不要用动态后缀验证，建议用环境变量管理允许的Origin列表，避免安全风险。

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