如何配置Cypress将请求与响应日志导出到文件排查偶发405错误

可以通过Cypress内置的请求拦截能力配合Node.js任务实现全量出站请求、响应落盘，无需打开开发者工具即可排查问题，具体配置流程如下：

1. 注册全局请求拦截命令 #

在cypress/support/e2e.js（组件测试对应cypress/support/component.js）中添加全局命令，拦截所有请求并记录完整信息：

Cypress.Commands.add('enableNetworkLog', () => {
  // 拦截所有域名的所有请求
  cy.intercept('*', (req) => {
    const reqInfo = {
      timestamp: new Date().toISOString(),
      method: req.method,
      url: req.url,
      reqHeaders: req.headers,
      reqBody: req.body
    }
    // 等待响应返回后合并响应信息
    req.continue((res) => {
      const fullLog = {
        ...reqInfo,
        resStatus: res.statusCode,
        resHeaders: res.headers,
        resBody: res.body
      }
      // 调用task写入本地文件
      cy.task('writeNetworkLog', fullLog)
    })
  })
})

2. 配置文件写入任务 #

在cypress.config.js中注册Node.js任务，实现日志本地落盘：

const { defineConfig } = require('cypress')
const fs = require('fs')
const path = require('path')

// 定义日志文件存储路径
const LOG_FILE = path.resolve(__dirname, './cypress/logs/network.jsonl')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        writeNetworkLog(log) {
          // 自动创建日志目录
          fs.mkdirSync(path.dirname(LOG_FILE), { recursive: true })
          // 以JSON Lines格式追加写入，避免单文件结构损坏
          fs.appendFileSync(LOG_FILE, JSON.stringify(log) + '\n')
          return null
        }
      })
    }
  }
})

3. 测试用例中启用日志 #

在需要排查问题的测试用例开头调用日志命令即可：

it('提交表单测试', () => {
  cy.enableNetworkLog()
  // 原有测试逻辑保持不变
  // cy.visit('/form')
  // cy.get('#submit').click()
  // ...
})

日志会存储在cypress/logs/network.jsonl中，每一行对应一条完整的请求响应记录，直接搜索resStatus:405即可定位出错请求。
你遇到的关闭开发者工具才复现405的问题，大概率是开启开发者工具时浏览器默认禁用缓存、自动修改origin/referer/缓存控制等请求头导致问题被隐藏，落盘日志记录的是浏览器实际发送的原始请求内容，不受开发者工具开关影响。定位到错误请求后可核对请求方法、请求头是否符合后端接口要求即可定位根因。

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