Why does running Cypress on a React/GraphQL app return network errors when normal browsing doesn't?

I have a React/apollo client and an apollo/neo4j backend application based on GRANDStack. My React app runs on localhost:3000 and my GraphQL on localhost:4001/graphql, and they communicate without fail. All is working well in the app (with CORS enabled), but I wanted to implement testing with Cypress.

Should I expect Cypress to be able to observe the flow between React and GraphQL without error? Or is this beyond its capability?

What I've tried: I set up Cypress and ran the following test:

it("Opens myPlan.", function() {
    cy.visit("localhost:3000/myPlan");
    cy.wait(6000);
});

At first cypress setup, my site loaded. One of the first things that the app does is graphql query a few values, and create a dropdown box based on those values. While this and all other graphql requests work fine in the browser, I get "{"graphQLErrors":[],"networkError":{"name":"ServerParseError","response":{},"statusCode":404,"bodyText":""},"message":"Network error: Unexpected end of JSON input"}" errors in cypress for the same code.

Presumably, the problem was because there are 2 endpoints, and cy.visit only allows one. I tried disabled ChromeWebSecurity and tried an "Access-Control-Allow-Origin-master" plugin.

Edit: I found someone that knew Cypress, and they suggested adding:

"proxy": "http://localhost:4001/",

to my react client config. This avoids the multi-port issues, and Cypress works.

Solution

Edit: I found someone that knew Cypress, and they suggested adding:

"proxy": "http://localhost:4001/",

to my react client config. This avoids the multi-port issues, and Cypress works.