使用Cypress测试带Yjs Websocket服务端的React应用连接问题

针对你遇到的Cypress（Firefox环境）无法连接Yjs Websocket服务的问题，以下是几个排查和解决方向：

• 关闭Cypress的跨域安全限制
  Cypress默认的同源策略限制可能会阻断websocket连接，即使是localhost地址。修改cypress.config.ts添加如下配置：

  import { defineConfig } from "cypress";
  
  export default defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
      },
      chromeWebSecurity: false, // 禁用跨域安全检查，允许ws跨域连接
    },
  });
  

• 确保Websocket服务监听所有网卡
  默认的y-websocket-server可能只监听localhost，导致Cypress的浏览器环境无法访问。修改启动命令：

  npx y-websocket-server --port 1234 --host 0.0.0.0
  

  这样服务会监听所有可用网卡，确保Cypress能连接到ws://localhost:1234。

• 修复Vite启动命令的重复问题
  你的dev命令重复启动了两次Vite服务，可能导致端口冲突或应用异常。修改package.json中的dev脚本：

  "dev": "concurrently --kill-others \"vite --host\""
  

• 针对Firefox的额外配置
  如果上述步骤无效，尝试为Firefox添加启动参数强制关闭安全限制：

  import { defineConfig } from "cypress";
  
  export default defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
      },
      chromeWebSecurity: false,
      firefox: {
        args: ["--disable-web-security"]
      }
    },
  });
  

内容的提问来源于stack exchange，提问作者Gabriel Sánche