GitHub Actions运行Cypress时前端服务无法连接后端服务排障求助

开发者阿泽

2026-10-1

问题排查与解决方案

验证后端服务可访问性
在Cypress执行步骤前新增单独的后端连通性校验步骤，确认后端本身可以正常响应请求：
```
- name: 验证后端服务连通性
  run: curl http://localhost:<替换为实际后端端口>/健康检查接口路径
```
若该步骤执行失败，说明后端服务绑定异常，检查后端启动配置中的监听地址是否为0.0.0.0，而非仅绑定127.0.0.1。
校验前端代理配置
若通过vue-cli的devServer代理转发API请求到后端，确认vue.config.js中的代理规则适配CI环境：
```
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        // 此处地址要和CI环境下后端实际运行的地址、端口完全一致
        target: 'http://localhost:<替换为实际后端端口>',
        changeOrigin: true
      }
    }
  }
}
```
注意：该代理仅在vue-cli启动开发服务（如yarn serve类命令）时生效，若CI中是打包后serve静态资源，代理规则不会生效，需要配置NGINX做反向代理转发API请求。

调整服务启动顺序
不要将前后端启动都放在Cypress action的start参数中并行执行，拆分启动步骤并分别等待服务就绪，避免出现前端启动完成但后端未完全加载的情况，调整后的yml步骤示例：

- name: 启动后端服务
  run: yarn backend:test &

- name: 等待后端服务就绪
  run: npx wait-on http://localhost:<替换为实际后端端口>

- name: 启动前端服务
  run: yarn frontend:test &

- name: 等待前端服务就绪
  run: npx wait-on http://localhost:3030

- name: 执行Cypress测试
  uses: cypress-io/github-action@v2
  with: 
    install: false
    record: true
    browser: chrome
    config-file: cypress/cypress-mobile.json
  env:
    # 保留原有全部环境变量配置