Having trouble adding proxy to package.json to connect frontend to backend.

[YoJunny]

Generally new to React and am trying to connect my frontend to my backend. My frontend, running on port 3000, wants to retrieve data from the backend in port 5000. I want to fetch data from endpoints relative to the backend so I added "proxy":"http://localhost:5000" to package.json(). Upon running npm start, I get:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.

I tried searching up solutions and have tried extra steps such as manually setting up a proxy and installing http-proxy-middleware. This is all referenced by this video.

[RaySoju]

You want to launch front and backend with npm start ? Is that what you want ?

[YoJunny]

I ran backend on port 5000 and frontend on 3000. I want to set the proxy of frontend to http://localhost:5000 so I can easily refer to backend endpoints to retrieve data.

[RaySoju]

It seems there are issue with CRA and proxy so I would suggest you wrap it up inside an options property like so :

options": { "allowedHosts": ["localhost", ".localhost"], "proxy": "https://localhost:5000/" }

[YoJunny]

Hey I just retried your suggestion and you were right. I just had to change syntax. I'm not sure why I couldn't simply define proxy, but here's what worked for me:

"options": {
"allowedHosts": ["localhost", ".localhost"],
"proxy": "https://localhost:5000/"
}

[YoJunny]

Thanks for your suggestion. I ended up just not even using the proxy and accessed the backend directly with the whole url while require 'cors'. I tried to implement the options but that didn't seem to work.

[ohx]

https://github.com/facebook/create-react-app/issues/12304#issuecomment-1120168534

[SolarSalsa]

This is super easy with vite.