Stubbing requests via cy.intercept doesnt work the same way as cy.route

[Tevinthuku]

Current behavior

The request I want to stub looks like so with the old cy.route

cy.route({
			method: 'POST',
			url: '**/sessions',
			status: 200,
			response: {
				success: true,
			},
			headers: {
				'x-token': "token",
			},
		})

With this, I get the "x-token" returned as a header back to the client. alongside other headers.

connection: "keep-alive"
content-length: "16"
content-type: "application/json; charset=utf-8"
date: "Thu, 11 Feb 2021 12:58:34 GMT"
vary: "Accept-Encoding",
x-token: "token"

Trying out the new cy.intercept API,

cy.intercept('**/sessions', {
			body: { success: true },
			headers: {
				x-token: "token"
			},
		})

This is what I get back

content-type: "application/json"

Desired behavior

I expect the x-token to be part of the headers returned in the response.
If Im missing anything, please let me know, thanks

Test code to reproduce

https://github.com/Tevinthuku/cypress-test-tiny
https://codesandbox.io/s/modest-hofstadter-gl5xj?file=/src/App.js

Versions

Cypress v 6.4.0

[Tevinthuku]

Based on this reproduction
https://github.com/Tevinthuku/cypress-test-tiny
https://codesandbox.io/s/modest-hofstadter-gl5xj?file=/src/App.js

with cy.route() the x-token header gets passed down , and the test in cy-route.js passes as it should,
but with cy.intercept() the test passes, but the function, at the response level it doesnt get the x-token header.

[lc-leoniefarmer]

I am experiencing the same issue. This code should add a header to every request, but I don't see any header added to my requests:

beforeEach(() => {
  
  cy.intercept('*',(req) => {
    req.headers['my-test'] = 'TEST'
  })
})

[sainthkh]

It's a CORS problem. The problematic code's domain is https://csb-gl5xj-g6j2kdska.vercel.app/ and it requests to domain, https://dummyendpoint.com. When CORS requests, x-token header cannot be accessed. Check this answer.

We can currently bypass this problem by adding Access-Control-Expose-Headers like below:

it('works', () => {
  cy.visit('https://csb-gl5xj-g6j2kdska.vercel.app/')
  cy.intercept('**/sessions', {
    body: { success: true },
    headers: {
      'Access-Control-Expose-Headers': 'x-token', // <= ADD THIS LINE
      'x-token': 'token',
    },
  }).as('loginRequest')

  cy.get('[data-testid=username-input]').type('user')
  cy.get('[data-testid=password-input]').type('userpassword')
  cy.get('[data-testid=signin-button]').click()
  cy.wait('@loginRequest').then((res) => {
    let headers = res.response.headers

    expect(headers).to.have.property('x-token')
  })
})

@flotwig I think there can be several solutions for this problem:

1. Automatically append 'Access-Control-Expose-Headers': '*' to all requests. It can sometimes cause false positive.
2. Don't append it and document about the CORS issue. It's a bit tedious to add 'Access-Control-Expose-Headers' to every test.
3. Provide exposeHeaders config. Different endpoints might have different exposed headers.

What do you think is the best solution? Maybe there can be other better ones.

[jennifer-shehane]

@sainthkh We already automatically pass some CORS headers. See this PR: #9384

[sainthkh]

@jennifer-shehane I checked the PR and the change is related with the CORS origin, not the exposed header properties. The PR doesn't do anything with Access-Control-Expose-Headers property. It only handles access-control-allow-origin and access-control-allow-credentials.

[flotwig]

@sainthkh of the 3 options you've listed, I think it would make sense to modify (1) slightly and go with it:

Automatically append 'Access-Control-Expose-Headers': '*' to all stubbed requests. It can sometimes cause false positive.

If we only apply it to stubbed requests, like we do with the other CORS headers, it should help avoid unnecessary modification of the header.

Another issue was opened about this same confusion, so it's probably worth fixing: #14654