Issue Attaching Headers to localhost React Test

[jaypostle]

Current behavior

Hello!

CRA app that has a login page connected to a Cognito pool.
I'm attempting to create a test through Cypress -> Chrome and running into the following issues.

With chromeWebSecurity: false in the cypress.config.js, Origin is not sent through in the headers and I get a 403 Forbidden error. The other headers (see below) are passed in correctly.

With chromeWebsecurity: true, no headers are sent through, including Origin. As expected, I receive a CORS error.

• The bearer token is correct
• Running the app on localhost and our dev environments in Chrome is running as expected
• I've also tried cy.intercept to set the headers with the same result
• Going directly to the dev URL (e.g. not-a-real-link.com) and logging in works

How can I properly pass through the headers required to successfully connect to the app through the Cypress chrome tester?

Desired behavior

Log in successfully to allow for more E2E testing.

Test code to reproduce

test.cy.js

describe("Test Page", () => {
  beforeEach(() => {
 
    cy.visit("http://localhost:3000", {
      headers: {
        Accept: "application/json, text/plain, */*",
        "Sec-Fetch-Mode": "cors",
        Host: "localhost:5000",
        "Accept-Encoding": "gzip, deflate, br, zstd",
        Origin: "http://localhost:3000", // This is not going through in the headers
        Referer: "http://localhost:3000/",
        "User-Agent": "axios/0.27.2",
      },
    });

    // Ensure the login form is fully loaded
    cy.getByData("login-form", { timeout: 10000 })
      .should("be.visible")
      .within(() => {
        cy.get('input[name="username"]').should("be.visible").type("username");
        cy.get('input[name="password"]').should("be.visible").type("password");
        cy.getByData("signin-btn").should("be.visible").click();
      });

  });

  it("passes", () => {
   
  });
});

cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(_on, _config) {},
    chromeWebSecurity: false,
    baseUrl: "http://localhost:3000",
    defaultCommandTimeout: 10000,
  },
  env: {
    cognito_username: process.env.AWS_COGNITO_USERNAME,
    cognito_password: process.env.AWS_COGNITO_PASSWORD,
  },
});

Cypress Version

13.15.0

Node version

v19.8.1

Operating System

macOS 14.6.1

Debug Logs

No response

Other

No response

[jennifer-shehane]

@jaypostle I'd suggest checking out our community chat, it can be helpful for debugging or answering questions on how to use Cypress.