https://cypress.io logo
Localhost CORS issue
# i-need-help
g
Hi, I have development e2e test with Cypress 12.4.0 (using Chrome) on local machine with this setup: - Vue.js v3 Frontend running on http://localhost:8080 using Vite server. Sends all backend API requests to http://localhost:3000 - Backend running on http://localhost:3000 with CORS setup to accept requests from http://localhost:8080. - cypress.config.ts content:
Copy code
import { defineConfig } from 'cypress'

export default defineConfig({
  chromeWebSecurity: false,
  projectId: 'e1suq1',
  fixturesFolder: 'tests/e2e/fixtures',
  screenshotsFolder: 'tests/e2e/screenshots',
  videosFolder: 'tests/e2e/videos',
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      return require('./tests/e2e/plugins/index.js')(on, config)
    },
    specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
    supportFile: 'tests/e2e/support/index.js',
  },
  watchForFileChanges: false,
  viewportWidth: 1024
})
With Cypress 10.8.0 all my test were passing fine. With upgrade to version 12, I am getting CORS errors - but only in Cypress. (see screenshot) When I test my app outside Cypress (using it in any browser), everything works just fine. I tried to change interceptor backend calls to http://0.0.0.0:3000 and it worked, but that raised issues with cookies (as 0.0.0.0 is not localhost). I am stuck. Is there way to e2e test on this setup?
In case somebody hits similar problem: Issue was caused by Node.js Moleculer backend (BE) running at IP "0.0.0.0" (default setting, BE is available on localhost too) and Vue.js frontend (FE) running at "localhost". After changing BE to "localhost", browsers stopped to have problems with CORS. This way I learned, that "0.0.0.0" is not the same as "localhost" - https://stackoverflow.com/a/20778887/1211333
3 Views