Cypress cannot access different ports on localhost

[tristantill]

Current behavior

A similar issue has been closed previously (#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

[lmiller1990]

Hi! You code looks good, > Error: connect ECONNREFUSED 127.0.0.1:4200 usually means it could not find anything on that port. Cypress definitely supports changing a different domain(s) during the tests, and even interacting with another origin via cy.origin: https://docs.cypress.io/api/commands/origin (this previously was not possible in older versions of Cypress, but now it is).

Happy to try and run your code and debug it, I think the repository is private. Can you make it public? Thanks!

[tristantill]

Hi @lmiller1990 !

Thank you for your response. The repository should now be publicly available. By now, I have tested the solution with a non-localhost database server, which works completely fine. However, the issue still persists locally. I am highly interested in seeing whether you can recreate the issue!

[lmiller1990]

@tristantill another question - I can see the repo now. Is there a specific branch? I can't see the see spec.cy.ts file your screenshot shows.

Can you share the exact steps to reproduce? Eg, what commands to run in which directories? I can probably figure it out, but it'll be likely faster if you just tell me exactly what to do.

[szykov]

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.local
https://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

[tristantill]

@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!

[lmiller1990]

Interesting, I tried to reproduce in a minimal fashion, but I was actually able to visit the different ports:

My minimal reproduction:

/// <reference types="cypress" />
describe('page', () => {
  it('works', () => {
    cy.visit('http://localhost:7777/foo')
    cy.contains('FOO')
  })

  it('works again', () => {
    cy.visit('http://localhost:8888/bar')
    cy.contains('BAR')
  })
})

App 1:

const express = require('express')
const app = express()
app.get("/foo", (_, res) => {
  res.send(`<div>FOO</div>`).end()
})
app.listen(7777, () => console.log('Listening'))

App 2:

const express = require('express')
const app = express()
app.get("/bar", (_, res) => {
  res.send(`<div>BAR</div>`).end()
})

app.listen(8888, () => console.log('Listening'))

[lmiller1990]

Repo: https://github.com/lmiller1990/cypress-test-tiny/blob/issue-26154/cypress/e2e/spec.cy.js (README.md has instructions on how to run it - I can visit and request separate ports, on problem).

Could this be windows specific? Another user has a similar problem here, as you pointed out: #6475

[lmiller1990]

Happy to reopen once we've got more information to continue debugging. Until then, I'll close this, since I don't see any actionable work in Cypress relating to this issue.

[soile1991]

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.0

[Wiz-Amit]

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.0

Worked for me. Had to use php -S 0.0.0.0:8000 public/index.php for lumen

[bradley-carestia-jbh]

Reproduced on windows, only appeared after updating to Node 18.17.1 from 16.20.2. In this case it was accessing MFE remotes, and had to change NX web:file-server to listen on 0.0.0.0 as suggested in the other workarounds

[ghost]

Same here after updating to Node 18.17.1 (on Mac M1). We have a NextJS frontend running on http://localhost:3000 and then our GraphQL server running on http://localhost:4000. What is very weird is that running cypress run we get:

cy:fetch ✘  POST http://localhost:4000/ - connect ECONNREFUSED 127.0.0.1:4000

and running cypress open we get the same BUT if (on Chrome) we open a new tab and open http://localhost:4000 before running a test, then it works...

Any clue?

[beinoriusju]

Same here after updating to Node 18.17.1 (on Mac M1). We have a NextJS frontend running on http://localhost:3000 and then our GraphQL server running on http://localhost:4000. What is very weird is that running cypress run we get:

cy:fetch ✘  POST http://localhost:4000/ - connect ECONNREFUSED 127.0.0.1:4000

and running cypress open we get the same BUT if (on Chrome) we open a new tab and open http://localhost:4000 before running a test, then it works...

Any clue?

See this

node-fetch/node-fetch#1624

[mbence]

I had the same issue on mac. For me the solution was to set IPv6 to local-link only. After I restarted all servers, it worked.

[MikeMcC399]

• related to discussion in IPv6 used for cypress backendUrl connection check #27962

The 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 localhost was changed.

[dgmagno]

I just changed from http://localhost:8888 to http://127.0.0.1:8888 and it worked for me

[scailancrei]

Hi, I am having the same issue but I've noticed if I try to make requests to my backend app before visiting my frontend fails with the same issue


But if I visit the frontend app before doing requests to my back all tests pass!

I would like to know why and if this is a bug or it's a normal behavior

[lukekroon]

I have the exact same issue as @scailancrei . If I do a API request to login to my application, it does not work. If I visit the login page via the UI, it works.

Angular: 18
Cypress: v13.13.1

[elarrat]

Exact same problem here too. Any tentative to reach the API from cypress' controlled browser doesn't work, but if I open a regular browser, it does. I changed my api url from localhost to 127.0.0.1 and it worked.

[patmull]

Please, is there any workaround for Laravel and Vue? This is really frustrating.

It should be reproducible from this repo I prepared:

https://github.com/patmull/laravel_vue_cypress_minimal (.env files used are in the README).

Assuming installed PHP 8.3.14 and NPM 10.9.0, my tested OS is: Fedora Linux 41 KDE Plasa 6.2.4.:

cd user_interface
npm install
npm run predeploy
npm run dev

cd ..
composer update
composer install
php artisan serve

Full ("normal") browsers are OK. Cypress fails with CORS (Cross-Origin). For example for Firefox 133.0:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/sanctum/csrf-cookie. (Reason: CORS request did not succeed). Status code: (null).

On URL: localhost:8000/sanctum/csrf-cookie

When I tweaked around with my full repo, it was OK on sanctum/csrf-cookie, when I changed every env variable of localhost:8000 to 127.0.0.1:8000, however then my other requests (e.g. /login /register, etc...) got blocked because of the different origin.

It may be either related to new version of either Cypress or npm or something else, or PHP server config. I tested this app previously on Ubuntu 22.04 without any issue on Local. Cypress testing also works on custom local domain or NGINX server with real domain, but not on localhost. Unfortunatelly, I had no time to test it on different OS yet.

I am shooting in the dark but I also include my /etc/hosts in case problem is here:

  GNU nano 8.1                                                                                                                                                                                                    /etc/hosts                                                                                                                                                                                                              
# Loopback entries; do not change.
# For historical reasons, localhost precedes localhost.localdomain:
127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4 test.server.local api.test.server.local
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
127.0.1.1   localserver
# See hosts(5) for proper format and other examples:
# 192.168.1.10 foo.example.org foo
# 192.168.1.13 bar.example.org bar
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1       kubernetes.docker.internal
# End of section

[adraut]

On Windows, I followed Method 2 (netsh commands) described here. That is working for now for me. The reason I used that is because the MFE framework at my current company doesn't allow for setting the webpack dev server host option right now.

This could just be disconnect between how webpack/node.js and cypress/browsers resolve names.