如何为XHR请求添加Header？Cypress测试场景示例求助

Hey, I've got you covered on this Cypress scenario! Adding a userId header to specific XHR requests is straightforward with Cypress's built-in cy.intercept command—here's exactly how to implement it for your use case:

// Step 1: Set up the request interceptor first (critical to do this before visiting the page)
// Replace 'POST' with your actual request method (GET, PUT, etc.) or use '*' for all methods
cy.intercept('POST', 'xhr-url', (req) => {
  // Add the userId header to the outgoing XHR request
  req.headers['userId'] = 'username';
}).as('targetedXhr'); // Optional alias: lets you wait/verify the request later

// Step 2: Visit your starting page, which triggers the XHR requests
cy.visit('myurl');

// Optional: Verify the header was successfully added (useful for validation/debugging)
cy.wait('@targetedXhr').then((interception) => {
  expect(interception.request.headers.userId).to.equal('username');
});

Quick Tips for Your Scenario: #

• Match multiple protected requests: If you need to add the userId header to all XHRs behind your SSO firewall (e.g., any request to /api/protected), use a regex instead of an exact URL:

  cy.intercept('*', /api\/protected/, (req) => {
    req.headers['userId'] = 'username';
  });
  

• Order is key: Always define cy.intercept before cy.visit—this ensures Cypress starts listening for requests immediately as the page loads, just like your browser plugin does.
• Simulate firewall behavior: This approach directly replicates the header modification your production firewall does—Cypress intercepts the outgoing request, adds the header, and sends it to your test server.

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