Create-react-app: ECONNRESET on proxy POST request

[kevinliyanto]

Hi there, I'm trying to set up a proxy between my TypeScript frontend using the "proxy" line on package.json:
"proxy": "http://localhost:5000"

I used WSL with this specific version: Linux DESKTOP 4.4.0-17763-Microsoft #864-Microsoft Thu Nov 07 15:22:00 PST 2019 x86_64 x86_64 x86_64 GNU/Linux. All development is done in the local machine and not intended for cloud purpose (for now).

Describe the bug

The backend system (Python, Flask-RestX with CORS and Flask-JWT-Extended) received the request properly and responded 200 (on the logs). However, I received this error when running yarn start:
Proxy error: Could not proxy request /auth/login from localhost:3000 to http://localhost:5000. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

I managed to migrate all of my source code from TS/TSX into JS and JSX (because of this: https://github.com/facebook/create-react-app/issues/6794) but I still encountered the same problem. I tried using axios or fetch, and both gives the same result.

Did you try recovering your dependencies?

I checked that my Yarn version was not the most recent one (1.12.1). However, I still encountered the same problem once I updated it. I removed yarn.lock and node_modules to reinstall the new packages but it still doesn't work.

I decided to use npm (removed lock file and all modules, again), ran npm install and npm start. Still got the same problem.

The current yarn and npm version is:
yarn: 1.22.4 npm: 6.14.2

Which terms did you search for in User Guide?

Couldn't find this problem anywhere inside the docs. However, some people seemed to have encountered the same problem, and it was either webpack configuration:

• https://github.com/webpack/webpack-dev-server/issues/793
• https://github.com/webpack/webpack-dev-server/issues/2126

or hpm:

• https://github.com/chimurai/http-proxy-middleware/issues/171

I tried fixing the module manually by the suggestions provided above but it seems that they break my CRA. I'm not an expert on frontend framework issues, hence I might be wrong.

This issue was also created a year ago (https://github.com/facebook/create-react-app/issues/6329) without details

Environment

Environment Info:

  current version of create-react-app: 3.4.0
  running from /home/user/.npm/_npx/4763/lib/node_modules/create-react-app

  System:
    OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.2 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: ^16.13.0 => 16.13.0
    react-dom: ^16.13.0 => 16.13.0
    react-scripts: 3.4.0 => 3.4.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Create the app using create react app (TS/JS doesn't matter)
2. Add a line that does POST request to proxy which routes to external API
3. Run the dev server and do the request

Expected behavior

I expected the request to be forwarded (from the backend) by the proxy to the frontend.

Actual behavior

I encountered this problem with yarn start (as specified above):

The backend API server seems to work fine and didn't have any issue (no preflight request):

I tried fetching directly to the backend without proxy but it doesn't work (Flask responded with "OPTIONS" request), which was expected. I checked the OPTIONS request on the exact endpoint, and got this:

Reproducible demo

https://github.com/kevinliyanto/frontend_cors

Question

Is it possible for me to enable CORS on CRA by ejecting?

[kevinliyanto]

One interesting note: I had my python backend (port 5000) and CRA frontend (port 3000) running, and the proxy runs fine:

This thread https://github.com/chimurai/http-proxy-middleware/issues/40 seems to have encountered the same problem as myself, and I'm not the only one who has spent 2 whole days trying to solve this.

Is it possible for CRA to implement (https://github.com/chimurai/http-proxy-middleware/issues/40#issuecomment-163398924), or is it something that webpack has to implement? Sorry that I don't really understand much on how to solve this issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.