cypress - 如何将标题添加到xhr-request

Question

我有以下情况:

一个开始页面，基本上包括通过xhr-requests发出的其他页面。

一些xhr请求位于具有单点登录方案的防火墙后面，在该防火墙中，对服务器的每个http请求都从一组 header 中剥离，然后根据用户授权进行填充。

当请求到达服务器时，它期望某些要求具有userId-header。

测试服务器不在“防火墙”后面，因此我们在浏览器中有一个插件可以模拟行为。

我们想在此页面上运行cypress-tests。但是我们似乎没有
查找如何将此userId-header添加到xhr-requests中，并且没有
能够找到这种行为的一个例子。

您能否提供一个示例，以一个简单的示例说明如何执行此操作？

对场景进行伪编码的注解:
cy.visit('myurl')。interceptBeforeXhr('xhr-url')。addHeader('xhr-url'，{'userId'='username'})

Answer 1

您可以使用headers属性指定标题，如下所示:

describe('Test Cypress Custom Headers', function() {
  it('Visits Cypress Header Test Endpoint', function() {
    const Key = "test-key1";

    cy.visit({
      // An endpoint that expects a x-xhr-url header to grand access
      url: 'https://zikro.gr/dbg/so/59666650', 
      headers: {
        "x-xhr-url": Key
      }
    });

    cy.contains(`Access key: ${Key}`);
  })
});

或者，如果您想使用相同的 header 发出多个请求，则可以使用 request :

describe('Test Cypress Custom Headers', function() {
  it('Visits Cypress Header Test Endpoint', function() {
    const Key = "test-key1";

    cy.request({
      url: 'https://zikro.gr/dbg/so/59666650',
      headers: {
        "x-xhr-url": Key
      }
    })
    .its('body').should('include', `Access key: ${Key}`);
  });
});

两项测试均应通过。

仅作记录，这是PHP端点 header 检查页面代码:

$headers = getallheaders();

if(isset($_SERVER['HTTP_X_XHR_URL'])) {
  echo "Access key: {$_SERVER['HTTP_X_XHR_URL']}";
} else {
  echo "Access denied";
}

最后，如果您想仅将 header 值应用于所有AJAX请求，则应使用 server onAnyRequest，然后在其中使用 proxy设置 xhr header ，如下所示:

describe('Test Cypress Custom Headers', function() {
  it('Visits Cypress Header Test Endpoint', function() {
    const Key = "test-key1";

    cy.server({
      onAnyRequest: (route,  proxy) => {
        proxy.xhr.setRequestHeader('x-xhr-url', Key);
      }
    });

    cy.visit('https://zikro.gr/dbg/so/59666650/test-ajax.html');

    // Should pass the test of an AJAX call
    cy.contains(`Access key: ${Key}`);
  });
});