Cypress（JS）全局设置请求Header报错及正确实现咨询

初始代码报错原因 #

你第一次的代码出现TypeError: Cannot destructure property 'headers' of 'undefined' as it is undefined错误，原因有两个：

• 自定义命令makeRequest定义时使用了解构参数({ headers })，但调用cy.makeRequest()时未传入任何参数，导致试图解构undefined触发报错。
• commands.js中的函数缺少闭合括号，存在语法错误。

调整后代码的问题 #

调整后的代码虽然解决了解构报错，但存在逻辑缺陷：

• cy.request()未指定method和url，会默认发起GET请求到当前页面URL，并非通用的请求封装。
• 这种方式只能覆盖通过makeRequest发起的请求，无法全局拦截所有请求（包括页面自身的API请求）。

正确的全局设置请求Header方法 #

方法一：全局拦截所有请求（推荐） #

通过cy.intercept()拦截所有请求，自动添加指定Header，适用于页面请求和cy.request发起的请求：
在cypress/support/index.js（或e2e.js）的beforeEach钩子中添加：

beforeEach(() => {
  cy.intercept('*', (req) => {
    // 设置默认Header，若请求已有该Header则保留（如需覆盖可直接赋值）
    req.headers['Content-Type'] = req.headers['Content-Type'] || 'application/json';
    req.headers['accept'] = req.headers['accept'] || 'application/json';
  });
});

方法二：覆盖cy.request默认配置 #

仅对cy.request发起的请求生效，自动合并默认Header和自定义Header：
在cypress/support/commands.js中添加：

Cypress.Commands.overwrite('request', (originalFn, options) => {
  const defaultHeaders = {
    'Content-Type': 'application/json',
    'accept': 'application/json'
  };
  // 合并默认Header与传入的Header，传入的Header会覆盖默认值
  options.headers = { ...defaultHeaders, ...options.headers };
  return originalFn(options);
});

之后直接使用cy.request()即可自动带上默认Header，也可在调用时自定义覆盖：

cy.request({
  method: 'POST',
  url: '/api/user',
  body: { name: 'test' },
  headers: { 'accept': 'text/html' } // 覆盖默认的accept值
});

完善自定义请求命令（可选） #

如果需要保留自定义makeRequest命令，可完善为支持完整请求参数的封装：

Cypress.Commands.add('makeRequest', (options = {}) => {
  const defaultOptions = {
    headers: {
      'Content-Type': 'application/json',
      'accept': 'application/json'
    }
  };
  // 合并默认配置与用户传入的配置，Header优先使用用户传入的值
  const mergedOptions = { ...defaultOptions, ...options };
  mergedOptions.headers = { ...defaultOptions.headers, ...options.headers };
  return cy.request(mergedOptions);
});

调用示例：

cy.makeRequest({
  method: 'GET',
  url: '/api/list',
  headers: { 'accept': 'text/html' }
});

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