Add custom header to every request by default?

[sandinmyjoints]

Is there some kind of configuration option to add a custom header to every visit call that Cypress makes? This would be used for whitelisting traffic from our end-to-end test suite to ensure it doesn't get blocked by any firewall rules.

[sandinmyjoints]

Found the answer: https://docs.cypress.io/api/cypress-api/custom-commands#Overwrite-Existing-Commands

[dvnrsn]

Edit: turned out the import wasn't working so I switched to require and the file worked.

// Import commands.js using ES2015 syntax:
// import './commands';

// Alternatively you can use CommonJS syntax:
require('./commands');

---

It doesn't seem to work for me

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  options.headers['my-header'] =
    Cypress.env('MY_HEADER');

  return originalFn(url, options);
});

which is weird because this works great

  beforeEach(() => {
    cy.intercept('*', (req) => {
      req.headers['my-header'] =
        Cypress.env('MY_HEADER');
    });
  });

[fwyattblake]

I needed to do this to add the headers:

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  
  const headers = {
    'my-header': Cypress.env('MY_HEADER')
  };

  const mergedOptions = {
    ...options,
    headers: {
      ...((options && options.headers) || {}),
      ...headers
    }
  };

  //
  // make sure to add a return here!
  return originalFn(url, options )
})