Cypress throws "cross origin error happened on page load" even if host didn't changed

Question

I'm running Cypress tests on https://localhost:3000, which is my CYPRESS_BASE_URL also. Navigating to / redirects to /en internally, which works fine. But the test that I'm writing is about a form which builds a new URL, like https://localhost:3000/foobar?param=value. This works finde, I can even see the page that I'm redirecting to. But Cypress complains about this:

Cypress detected a cross origin error happened on page load:

  > Blocked a frame with origin "https://localhost:3000" from accessing a cross-origin frame.

Before the page load, you were bound to the origin policy:

  > https://localhost:3000

A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.

A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.

Cypress does not allow you to navigate to a different origin URL within a single test.

You may need to restructure some of your test code to avoid this problem.

Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in cypress.json.

I do not want to disable chromeWebSecurity (which works), since I'm running this test on Firefox also. The only thing I can imagine is the way I do the redirect: window.location.href = "/foobar?param=value".

The error message is about changing protocol, port or host, but I'm doing none of them, and my SSL certificate is a valid one.

Could this be a bug or did I overlooked something?

Answer 1

A CORS error indicates that you might be performing requests to a different origin. An origin is the combination of protocol (http, https), domain (myapp.com, localhost), and port (80, 443, 3000).

So, all these are different origins:

• http://localhost
• https://localhost
• http://localhost:3000

Even if they are all in localhost, they use different protocols or ports, so, they are different "origins". Two objects have the same origin only when the protocol, domain and port all match.

In Cypress, this is a common issue for many others when performing redirections, for instance, as in your case (see the discussion here). As per the documentation:

Cypress detected a cross-origin error happened on page load

This error means that your application navigated to a superdomain that Cypress was not bound to. Initially when you cy.visit(), Cypress changes the browser's URL to match the url passed to cy.visit(). This enables Cypress to communicate with your application to bypass all same-origin security policies among other things. When your application navigates to a superdomain outside of the current origin-policy, Cypress is unable to communicate with it, and thus fails.

If you find yourself stuck and can't work around these issues you can set chromeWebSecurity to false in your configuration file (cypress.json by default) when running in Chrome family browsers (this setting will not work in other browsers). Before doing so, you should really understand and read about the reasoning here.

{"chromeWebSecurity": false}

Also, as described here:

If you attempt to visit two different superdomains, Cypress will error. Visiting subdomains works fine. You can visit different superdomains in different tests, but not in the same test.

Thus, although you are visting a subdomain, you might want to consider the following, as described in the documentation, which is used for visiting different superdomains:

it('navigates', () => {
  cy.visit('https://localhost:3000')
})

it('navigates to new origin', () => {
  cy.visit('https://localhost:3000/foobar?param=value')
})

Additionally, in the same documentation:

Although Cypress tries to enforce this limitation, it is possible for your application to bypass Cypress's ability to detect this.

Examples of test cases that will error due to superdomain limitations

1. .click() an <a> with an href to a different superdomain.
2. .submit() a <form> that causes your web server to redirect to you a different superdomain.
3. Issue a JavaScript redirect in your application, such as window.location.href = '...', to a different superdomain.

In each of these situations, Cypress will lose the ability to automate your application and will immediately error.

See common workarounds.

Answer 2

See Does Cross-Origin Resource Sharing(CORS) differentiate between HTTP AND HTTPS? for a definition of superdomain

Yes, HTTP and HTTPS origins are different.

An origin is a combination of hostname, port, and scheme.

 http://foo.example.com:8080/
 ^^^^   ^^^^^^^^^^^^^^^ ^^^^
  ||           ||        ||
scheme      hostname    port  

So if I run this test I get the CORS error

it('throws a CORS error', () => {

  const domain1 = 'https://localhost:3003'
  const domain2 = 'http://localhost:3003'
  
  cy.intercept(domain1, '<html></html>').as('lh')  // stubbing because no server running

  cy.visit(domain1)

  cy.wait('@lh')

  cy.window().then(win => {
    win.location.href = domain2    // Cypress detected a cross origin error happened...
  })
})

In your test, there could be a couple of reasons

• normally localhost uses http:// not https://. If you try it the browser give you This site can’t provide a secure connection. May be Cypress is correcting the scheme when it sees hostname localhost.

• Your main page is using scheme http:// but your redirect is navigating to https://.