Solving CORS Issues with Cypress

The Need of Authentication

There is going to be the need to add authentication to your application. In a real-world application, this translates to a login process, to verify you are who you say you are. The difficulty with this is that all enterprise organizations re-direct the user to an alternate link to log in. After the user log’s in with username and password, this individual will then be re-directed to the appropriate app. This re-direct will trigger a CORS issue. The error usually looks something like the following:

CypressError: Cypress detected a cross origin error happened on page load:
Blocked a frame with origin "url" from accessing a cross-origin frame.

If you want to test locally and see your updates in real-time, you will need to get around this CORS issue. This article addresses how to get around this issue.

Steps to solve CORS issue

1. Add the following to your plugins/index.js file.

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    console.log(config, browser, args);
    if (browser.name === 'chrome') {
      args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
      args.push("--load-extension=cypress/extensions/Ignore-X-Frame-headers_v1.1");
    }
    return args;
  });
};

2. Add the following to your cypress.json file

chromeWebSecurity: false,

3. Change the appropriate environment url to use localhost (might be different in your development environment) in the cypress.json file. e.g.

test_url: "http://localhost:4200 ",

4. Download the Ignore X-Frame Headers plugin within Cypress launched browser. Will remain downloaded, even when you end your Cypress session.

Friendly Reminder

Ideally your organization should have special urls to run your apis in a test environment. If that is the case, do not forget to change them in your environment.ts file.