如何在Cypress.io中使用cy.intercept操作任意路由与请求类型设置请求头

问题根因 #

你当前使用的/*通配符匹配规则仅能覆盖站点根路径下的一级路径，无法匹配多级路径、跨域请求、带完整域名的请求，导致大量请求未被拦截，头修改逻辑未生效。

正确实现方案 #

将拦截规则替换为全局通配符**，即可匹配所有请求，同时显式调用req.continue()避免部分版本出现拦截阻塞问题：

Cypress.Commands.add('setHeaderToken', () => {
  // ** 通配符匹配所有域名、所有路径的请求
  cy.intercept('**', (req) => {
    req.headers['<CUSTOM-HEADER-HERE>'] = '<header-value-here>'
    // 确认修改后继续发送请求
    req.continue()
  })
})

如果需要过滤静态资源，仅拦截XHR/Fetch接口请求，可以使用更精准的匹配配置：

Cypress.Commands.add('setHeaderToken', () => {
  cy.intercept({
    url: '*',
    // 仅匹配接口类请求，过滤css/js/图片等静态资源
    resourceType: /xhr|fetch/
  }, (req) => {
    req.headers['<CUSTOM-HEADER-HERE>'] = '<header-value-here>'
    req.continue()
  })
})

调用方式 #

不需要调整原有调用逻辑，依然在beforeEach钩子中调用即可：

beforeEach(() => {
  cy.setHeaderToken();
});

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