Cypress intercept无法拦截服务端发起的请求问题排查

核心问题 #

cy.intercept只能捕获浏览器发起的HTTP请求，你提到的第二个请求是由Node服务端直接发起的，这类请求不会经过浏览器环境，所以Cypress根本无法拦截到，自然无法修改请求头。

解决方案1：直接修改服务端请求代码 #

如果服务端调用第三方接口的逻辑可控，直接在服务端代码里添加自定义请求头是最直接的方式。比如用axios发起请求的示例：

// Node服务端代码（axios示例）
const axios = require('axios');

async function callThirdPartyAPI() {
  const response = await axios.post('https://第三方域名/endpoint/B', requestData, {
    headers: {
      'custom-header-one': 'ch1',
      'custom-header-two': 'ch2'
    }
  });
  return response.data;
}

解决方案2：将服务端请求转发到Cypress可拦截的地址 #

如果测试时需要Mock第三方接口，或者必须通过Cypress控制请求，可以让Node服务端把第三方请求转发到Cypress的Mock服务：

1. 在测试启动时，配置Node服务端将第三方域名的请求代理到Cypress可处理的地址
2. 然后在Cypress里用cy.intercept拦截转发后的请求，修改请求头或返回Mock数据：

cy.intercept('POST', '/endpoint/B', (req) => {
  req.headers['custom-header-one'] = 'ch1';
  req.headers['custom-header-two'] = 'ch2';
  // 也可以直接返回Mock响应
  req.reply({ statusCode: 200, body: { success: true } });
});

解决方案3：通过cy.task在Node端动态配置请求头 #

如果需要在测试过程中动态修改服务端的请求头，可以用Cypress的cy.task触发Node端的逻辑，修改全局请求配置：

1. 在cypress.config.js中注册自定义task：

const { defineConfig } = require('cypress');
const axios = require('./path-to-your-axios-instance'); // 引入服务端的axios实例

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        setThirdPartyHeaders(headers) {
          // 设置全局axios的默认请求头
          axios.defaults.headers.common = { ...axios.defaults.headers.common, ...headers };
          return null;
        }
      });
    },
  },
});

2. 在测试用例中调用task，然后触发服务端请求：

// 先设置请求头
cy.task('setThirdPartyHeaders', {
  'custom-header-one': 'ch1',
  'custom-header-two': 'ch2'
});

// 触发服务端调用第三方接口的逻辑
cy.visit('/endpoint/A');

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