Cypress net::ERR_EMPTY_RESPONSE on real server calls

Question

I'm trying to test my fullstack angular-nestjs-application with cypress e2e tests.

Server calls from within angular to not reach my backend running on localhost:443 (I tested it with 0.0.0.0, 127.0.0.1 like some other answers requested - without success. I also did try to add a local proxy on my machine like some other posts suggested - again without any success).

On the other hand: Requests sent by cy.request('http://localhost:443/...' do actually reach my backend. I am able to send the request in beforeEach, save the response, intercept the real request and feed the saved response data to it.

cy.login() does a login call to build a valid session for my backend.

    describe('test', () => {
        let data: any;

        beforeEach(() => {
            cy.login();
            cy.request('http://localhost:443/load').then(response => {
                data = response;
                console.log('BeforeEach Response: ', data);
            });
        });

        it('load data', () => {
            cy.visit('/');
        });
    });

But the following line in beforeEach does work:

cy.request('http://localhost:443/load').then(response => {
    data = response;
    console.log('BeforeEach Response: ', data);
});

So the following test does work completely:

    describe('test', () => {
        let data: any;

        beforeEach(() => {
            cy.login();
            cy.request('http://localhost:443/load').then(response => {
                data = response;
                console.log('BeforeEach Response: ', data);
            });
        });

        it('load data', () => {
            cy.intercept('/load', data);
            cy.visit('/');
        });
    });

So what am i missing to successfully test my application with real server requests - without sending the same request by hand and stubing the real one?

Answer 1

I assume your baseUrl in cypress.json is not localhost:443. If that's the case, then for chrome-based browsers you can set chromeWebSecurity to false. See https://docs.cypress.io/guides/guides/web-security#Set-chromeWebSecurity-to-false. If that doesn't help or you have to test with firefox then you have to put your app and all required backend-services behind a proxy, so that it looks like every request is served by the proxy. If you have Angular in dev-mode then you already have a proxy and you can configure your backend services via proxy.conf.json. See https://angular.io/guide/build#proxying-to-a-backend-server