Как добавить заголовок в xhr-запрос

Question

У меня есть следующий сценарий:

• Стартовая страница, которая в основном включает другие страницы через xhr-запросы.

• Некоторые из xhr- запросы находятся за брандмауэром со схемой единой регистрации, где каждый http-запрос к серверу отбирается из набора заголовков, а затем заполняется в соответствии с грантами пользователей.

• Когда запрос достигает сервера, он ожидает, что у некоторых запросов будет заголовок userId.

• Тест-серверы НЕ находятся за «брандмауэром», поэтому в наших браузерах есть плагин для эмуляции поведения.

  Мы хотели бы запустить cypress-тесты на этой странице. Но мы, похоже, не нашли, как добавить этот userId-заголовок в xhr-запросы, и не смогли найти пример такого поведения.

  Не могли бы вы привести пример, показывающий, как это сделать, на простом примере?

Попытка псевдо-кодирования сценария: 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}`);
  })
});

Или вы можете использовать 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:

$headers = getallheaders();

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

Наконец, Если вы хотите применить значение заголовка только ко всем AJAX запросам, то вы должны использовать server onAnyRequest и там использовать proxy для установки заголовка xhr следующим образом:

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