How to add header to xhr-request

Question

I have the following scenario:

• A startpage that basically includes other pages through xhr-requests.

• Some of the xhr-requests are behind an firewall with a single-signon-scheme where each http-request to the server is stripped from a set of headers and then populated according to the users grants.

• When the request reaches the server it expect some of the reqeusts to have the userId-header.

• Test-servers are NOT behind "firewall" so we have a plugin in our browsers to emulate the behaviour.

  We would like to run cypress-tests on this page. But we doesn't seem to find how to add this userId-header to the xhr-requests and havn't been able to find an example of this behaviour.

  Could you please provide an example that shows how to do this with a simple example?

An attemt to pseduo-code the scenario: cy.visit('myurl').interceptBeforeXhr('xhr-url').addHeader('xhr-url', {'userId' = 'username'})

Answer 1

You can use headers property to specify a header like this:

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}`);
  })
});

Or you can use request if you want to make multiple requests using the same headers:

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}`);
  });
});

Both tests should be passing.

Just for the record, here is the PHP endpoint header check page code:

$headers = getallheaders();

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

Lastly, If you want to apply the header value just to all AJAX requests, then you shall use server onAnyRequest and there use proxy to set the xhr header like this:

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}`);
  });
});