cypress: Cypress cannot access different ports on localhost
Current behavior
A similar issue has been closed previously (https://github.com/cypress-io/cypress/issues/6475) without a working solution in place.
I am trying to implement e2e tests for a web application with an AngularJS frontend and a Django backend with Cypress. Both run locally (frontend: localhost:4200, backend: localhost:8000), but either one or the other are not accessible in the Cypress environment, despite working perfectly fine in a regular browser window. This is happening regardless of which (Cypress) browser I am using. In each case, the domain I access first manages to load with the other being blocked:

Desired behavior
Cypress should be able to reach both ports on localhost
Test code to reproduce
The code for both backend and frontend are available at https://github.com/ChriReiter/JAM The running config uses an external database server, which is no longer in use. To redirect requests to the localhost, change the file at frontend/src/environments/environments.ts to target the localhost as the apiBaseUrl
Cypress Version
12.8.1
Node version
18.12.0
Operating System
Windows 11, Version 22H2
Debug Logs
cy.visit() failed trying to load:
http://localhost:4200/
We attempted to make an http request to this URL but the request failed without a response.
We received this error at the network level:
> Error: connect ECONNREFUSED 127.0.0.1:4200
Common situations why this would fail:
- you don't have internet access
- you forgot to run / boot your web server
- your web server isn't accessible
- you have weird network configuration settings on your computer
cypress/e2e/spec.cy.ts:5:6
3 | })
4 | it('passes', () => {
> 5 | cy.visit('http://localhost:4200/')
| ^
6 | })
7 |
View stack trace
Print to console
at <unknown> (http://localhost:8000/__cypress/runner/cypress_runner.js:138252:82)
at visitFailedByErr (http://localhost:8000/__cypress/runner/cypress_runner.js:137644:12)
at <unknown> (http://localhost:8000/__cypress/runner/cypress_runner.js:138251:11)
From previous event:
at visit (http://localhost:8000/__cypress/runner/cypress_runner.js:138217:17)
at Context.visit (http://localhost:8000/__cypress/runner/cypress_runner.js:138268:14)
at wrapped (http://localhost:8000/__cypress/runner/cypress_runner.js:151174:43)
From Your Spec Code:
at Context.eval (webpack:///./cypress/e2e/spec.cy.ts:5:5)
From Node.js Internals:
Error: connect ECONNREFUSED 127.0.0.1:4200
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)
Other
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 1
- Comments: 16 (6 by maintainers)
Commits related to this issue
- Use 127.0.0.1 instead of localhost - https://github.com/cypress-io/cypress/issues/26154 - https://github.com/node-fetch/node-fetch/issues/1624 - https://github.com/nodejs/node/issues/40702 — committed to davidmyersdev/octo by davidmyersdev 9 months ago
- Use 127.0.0.1 instead of localhost - https://github.com/cypress-io/cypress/issues/26154 - https://github.com/node-fetch/node-fetch/issues/1624 - https://github.com/nodejs/node/issues/40702 — committed to davidmyersdev/octo by davidmyersdev 9 months ago
Hello, I had the same issue in one of the two projects I work on with Django and Angular. Turns out I was using --host 0.0.0.0 on the one that was working ok.
I run the angular server like this and the problem was solved
ng serve --host 0.0.0.0The problems mostly arise if the dev server is not listening on both IPv4 and IPv6 stacks and after migrating to Node.js >= 18 where the order of IP addresses returned from Node.js requesting the address of
localhostwas changed.@lmiller1990 sorry for the inconvenience once again.
The current branch I am running is the latest version of the main branch.
The code I tested was with the “basic installation” of Cypress (getting started in the cypress documentation): running npm install in the frontend folder, following the terminal instructions (e.g. changing the default testing route “ng e2e” to access Cypress) and running the code.
The spec.cy.ts is as kept as simple as possible for testing. The file itself contains no other statements than these: describe(‘Login’, () => { it(‘Load frontend’, () => { cy.visit(‘http://localhost:4200/’) }) it(‘Load backend’, () => { cy.visit(‘http://localhost:8000/api/’) }) })
The issue prevails if ‘Load frontend’ and ‘Load backend’ are swapped (as seen in the screenshots).
Thank you @szykov for the workaround, this solution works perfectly fine for me as well!
I also confirm that. If you use different ports for localhost it accepts only one. We use angular to run different micro frontends and use localhost to test it. It works just fine in any browser but in cypress. So for example https://localhost:46000/any_file.js (WORKS) https://localhost:47000/any_file.js (NOT WORKING, ERR_EMPTY_RESPONSE) It gives an empty response. I tried different versions of cypress or chromium browsers and had no luck. Clearing cache, deleting HSTS for localhost, setting false for chromeWebSecurity, disabling firewalls and antiviruses, experimenting with different ports, and using different laptops. nothing works.
the workaround is to set the domain name in the OS hosts file. an example for windows:
::1 localhost.localhttps://localhost:46000/any_file.js (WORKS) https://localhost.local:47000/any_file.js (WORKS) if you use webpack to serve files then do not forget to disable-host-check