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?
–
–
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
.click() an <a> with an href to a different superdomain.
.submit() a <form> that causes your web server to redirect to you a different superdomain.
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.
–
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://.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
