Cypress changes the URL and it breaks the app

I'm learning Cypress and for that purpose I am using this site: automationpractice.com.

Scenario: Sign up. In the sign up form the app validate the email (1) then it is redirected to another form (2).

In this flow, Cypress throws the following error:

  CypressError: Cypress detected a cross origin error happened on page load:

  > Blocked a frame with origin "http://automationpractice.com" from accessing a cross-origin frame.

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

  > http://automationpractice.com

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

I don't know why of this error, the form 2 is not inside an iframe, is the same url. Anyone knows?

Trying to fix it, "chromeWebSecurity": false was added to cypress.json. Then, after "Register an Account" button is clicked the second form is loaded inside cypress viewport but cypress changes the url to http://automationpractice.com/__/#account-creation, so the form disappears and the fields are not located.

I suppose that avoiding that cypress change the url I can solve this issue. But, I couldn't find any related in the documentation. Anyone knows how to solve it?

// test.spec.js
context('Cypress Training', () => {

  beforeEach(() => {
    cy.visit('http://automationpractice.com/index.php?controller=authentication&back=my-account')
  })

  it('Register user', () => {
    const email = 'test@test.test.test';
    // form 1
    cy.get('#email_create').type(email)
    cy.get('#SubmitCreate').click();

    // form 2
    cy.wait(3000)
    cy.get('#id_gender1').click()
  })
})