Cypress测试Vue应用WebSocket握手报Sec-WebSocket-Accept头缺失

该问题基本都由Cypress内置代理层对WebSocket升级请求的处理异常导致，业务代码在本地、生产环境正常即可排除服务端逻辑问题，按以下步骤逐一排查：

• 先校验Cypress基础版本与配置
  低于10.0版本的Cypress对WebSocket协议的代理存在已知缺陷，会直接过滤掉握手响应里的Sec-WebSocket-Accept头，优先升级到当前稳定版，升级后执行npx cypress cache clear清空缓存再重启测试。
  如果已经是10+版本，检查cypress配置里的experimentalModifyObstructiveThirdPartyCode开关是否开启，该实验特性会篡改请求头导致服务端无法识别WebSocket升级请求，先将其设为false再重试。
• 排查代理规则配置问题
  打开Cypress测试运行器，按F12唤出开发者工具，切到Network面板筛选WS请求，找到失败的握手请求，对比正常本地环境的请求头，确认Sec-WebSocket-Key、Connection: Upgrade、Upgrade: websocket三个核心头没有被篡改。
  如果你的WebSocket服务和前端服务非同域/同端口，检查devServer代理配置是否开启了WebSocket透传：Vite场景下需要给对应代理规则加ws: true配置，Webpack场景同理需要在devServer.proxy里开启ws支持，示例配置：

  // cypress.config.js  Vite+Vue组件测试配置示例
  module.exports = {
    component: {
      devServer: {
        framework: 'vue',
        bundler: 'vite',
        viteConfig: {
          server: {
            proxy: {
              '/ws-path': {
                target: 'ws://127.0.0.1:你的服务端口',
                changeOrigin: true,
                ws: true // 必须开启，否则代理不会处理WebSocket升级请求
              }
            }
          }
        }
      }
    }
  }
  

  如果你用了cy.intercept做接口Mock，检查是否存在匹配范围过大的规则（比如cy.intercept('*', 处理逻辑)），这类规则会把WebSocket升级请求当成普通HTTP请求拦截，不会透传协议升级相关的响应头，收窄拦截规则的匹配路径，明确排除WebSocket接口前缀即可。
• 兜底绕过方案
  如果以上配置调整后仍存在问题，可以配置Cypress启动参数让WebSocket请求绕过内置代理，直接和服务端建立连接，配置方式如下：

  // cypress.config.js
  module.exports = {
    e2e: {
      setupNodeEvents(on, config) {
        on('before:browser:launch', (browser, launchOptions) => {
          if (browser.family === 'chromium') {
            // 让所有ws/wss请求绕过Cypress代理
            launchOptions.args.push('--proxy-bypass-list=<-loopback>,ws://*,wss://*')
          }
          return launchOptions
        })
      }
    }
  }
  

  注意：该方案下Cypress不会捕获WebSocket请求的日志，也无法用cy.intercept监听WS消息，如果你的用例需要对WebSocket消息做断言，优先用前面的代理配置修复方案。

• 验证修复
  所有配置修改后需要完全退出Cypress测试运行器再重新启动，不要依赖配置热重载，重启后查看WS握手响应头，能正常看到Sec-WebSocket-Accept字段即修复完成。

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