Github Actions上Cypress前置处理器Fetch请求失败求排查方案

问题场景 #

需要在每个Cucumber测试场景前，通过Cypress的test:before:run:async钩子调用后端重置服务，实现数据库/服务器重置。本地运行完全正常，但在Github Actions上始终失败：Fetch请求报Failed to fetch，改用XMLHttpRequest则返回状态码0且无状态文本。同域请求可正常执行，确认是跨域相关问题，但已尝试过切换浏览器、有头模式、关闭Chrome安全策略、后端设置CORS头、替换请求方式等方案，均无效。

已尝试的无效方案 #

• 切换Electron或Chrome浏览器
• 运行有头模式（headfull）
• 关闭Chrome Web Security
• 使用XMLHttpRequest替代Fetch
• 在后端服务器设置CORS头

调试与解决思路 #

1. 先验证CI环境中后端重置服务的可达性 #

在Github Actions的测试执行步骤前，添加curl命令直接请求重置接口，排除服务未启动、端口映射错误等基础问题：

- name: Validate reset endpoint accessibility
  run: curl http://127.0.0.1:<你的重置服务端口>/

2. 改用Cypress内置cy.request()绕过浏览器CORS限制 #

cy.request()运行在Node环境，不受浏览器跨域规则约束，是CI环境下跨域请求的可靠替代方案。将重置逻辑从test:before:run:async钩子迁移到Cucumber的Before钩子中：

const { Before } = require('cypress-cucumber-preprocessor/steps');

Before(async function () {
  // 动态生成重置服务地址，避免硬编码端口
  const baseProtocol = Cypress.config('baseUrl').split(':')[0];
  const resetPort = Number(Cypress.config('port')) + 1;
  const resetUrl = `${baseProtocol}://127.0.0.1:${resetPort}/`;
  
  await cy.request({
    method: 'GET',
    url: resetUrl,
    failOnStatusCode: false // 防止重置接口返回非200状态导致测试中断
  });
});

3. 调试Github Actions中的浏览器环境 #

• 查看测试视频与截图：Cypress在Github Actions中默认会录制测试视频、生成失败截图，测试完成后可下载这些文件，查看浏览器控制台的详细错误日志。
• 输出关键参数日志：在测试代码中添加日志，确认CI环境中生成的重置接口地址是否正确：

  Before(async function () {
    const resetUrl = `${Cypress.config('baseUrl').split(':')[0]}://127.0.0.1:${Number(Cypress.config('port')) + 1}/`;
    cy.log(`Reset endpoint URL: ${resetUrl}`);
    await cy.request(resetUrl);
  });
  

• 实时远程调试：在Github Actions中添加VNC服务，可远程连接到CI环境的浏览器，实时查看测试过程与控制台信息：

  - name: Install and start VNC server
    run: |
      sudo apt-get update && sudo apt-get install -y tightvncserver
      tightvncserver :1 -geometry 1920x1080 -depth 24
  

  后续可通过VNC客户端连接到CI虚拟机的对应端口，直接操作浏览器排查问题。

4. 检查CI环境的网络配置 #

Github Actions虚拟机可能存在特殊网络限制，可尝试：

• 用0.0.0.0替代127.0.0.1访问重置服务，确认是否是本地绑定地址的问题
• 检查后端服务是否正确监听了所有网络接口，而非仅本地回环地址

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