如何在Cypress测试中动态修改Angular代理的请求头？

方案1：拦截Angular发起的/api请求并修改头 #

你之前的拦截目标有误——你拦截的是页面(/testme)的加载请求，但实际需要修改的是Angular后续发起的/api前缀的API请求。直接拦截这些请求并覆盖foo头即可：

// 先配置拦截规则，匹配所有/api开头的请求
cy.intercept('/api/**', (req) => {
  // 根据测试场景动态设置foo头的值
  req.headers['foo'] = 'rebar';
}).as('apiCall');

// 访问页面触发API请求
cy.visit('http://localhost:4200/testme');

// 可选：等待请求完成，确保拦截逻辑生效
cy.wait('@apiCall');

原理：Cypress会在浏览器与Angular代理之间拦截/api请求，修改请求头后再转发给代理服务器。通常Angular代理配置的headers是追加模式，Cypress设置的头会覆盖代理配置的默认值。如果代理是强制覆盖，可调整代理配置为仅当请求无foo头时才添加。

方案2：直接拦截发往目标服务器的请求 #

如果担心代理配置的干扰，可直接拦截最终发往server.com的请求，跳过代理层修改头：

// 匹配目标服务器的API路径
cy.intercept('https://server.com/path/to/api/**', (req) => {
  req.headers['foo'] = 'foobar';
}).as('targetApiCall');

cy.visit('http://localhost:4200/testme');

优势：完全绕开Angular代理的头配置，直接修改到达目标服务器的请求头，确保修改生效。

方案3：优化多环境配置（单proxy文件） #

若倾向于环境切换的方式，无需创建多个proxy.conf.json，可通过环境变量动态注入foo值：

1. 修改proxy.conf.json，使用环境变量占位符：

{
  "/api/*": {
    "target": "https://server.com/path/to/api",
    "headers": {
      "foo": "${FOO_HEADER_VALUE}"
    },
    "secure": false,
    "changeOrigin": true
  }
}

2. 在angular.json中配置多环境，传递不同变量值：

"projects": {
  "your-app": {
    "architect": {
      "serve": {
        "configurations": {
          "baz": {
            "env": {
              "FOO_HEADER_VALUE": "baz"
            },
            "proxyConfig": "proxy.conf.json"
          },
          "bar": {
            "env": {
              "FOO_HEADER_VALUE": "bar"
            },
            "proxyConfig": "proxy.conf.json"
          },
          "rebar": {
            "env": {
              "FOO_HEADER_VALUE": "rebar"
            },
            "proxyConfig": "proxy.conf.json"
          }
        }
      }
    }
  }
}

3. 启动时指定对应配置：

concurrently "ng serve --configuration=bar" "cypress open"

优势：仅维护一个代理配置文件，通过环境变量切换头值，比多proxy文件更简洁易维护。

方案4：业务代码兼容查询参数（需修改Angular代码） #

若允许修改业务代码，可让API请求优先读取URL查询参数中的foo值， fallback到代理默认值：

1. 在Angular的API服务中添加逻辑：

import { ActivatedRoute } from '@angular/router';

constructor(private http: HttpClient, private route: ActivatedRoute) {}

fetchData() {
  // 优先取URL查询参数，无则用代理默认值baz
  const fooValue = this.route.snapshot.queryParamMap.get('foo') || 'baz';
  return this.http.get('/api/data', {
    headers: {
      'foo': fooValue
    }
  });
}

2. Cypress测试时直接在URL传参：

// 测试bar场景
cy.visit('http://localhost:4200/testme?foo=bar');

// 测试rebar场景
cy.visit('http://localhost:4200/testme?foo=rebar');

优势：无需修改代理或Cypress拦截逻辑，通过业务代码兼容实现测试灵活切换。

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