0
"proxy": "https://mango-artist-rmdnr.pwskills.app:5000",

I am adding this code to connect my frontend with backend then it showing invalid host header.

My backend is running on port 5000 and frontend react is running on port 3000.

"scripts": {
  "start": "react-scripts start --public YOUR_LOCAL_IP_ADDRESS"
}

I use this in my frontend's package.json file then it is running fine but it is running on port 3000 not on port 5000.

Sydney_dev
  • 1,448
  • 2
  • 17
  • 24
Shivam mishra
  • 1

2 Answers2

0

It may be a cross-origin error! add this to your backend code

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000"); 
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

and use your actual frontend address instead of http://localhost:3000.

on top of these try removing the --public YOUR_LOCAL_IP_ADDRESS argument from your frontend's start script in package.json, since it's not necessary for running the frontend and may cause issues. You can leave the script as "start": "react-scripts start".

Finally, make sure that your proxy is correctly configured in your frontend's package.json file:

"proxy": "http://localhost:5000"

This tells the frontend to proxy requests to the backend running on port 5000. Make sure to restart both the frontend and backend servers after making these changes.

zohoorparvaz
  • 15
  • 3
  • Failed to load resource: the server responded with a status of 502 (Bad Gateway) After doing this showing above error. – Shivam mishra Mar 22 '23 at 06:02
  • Have you tried using npm install cors and using it on backend and adding proxy to your script too instead of the first method I mentioned? – zohoorparvaz Mar 22 '23 at 16:54
0

create-react-app docs mention this issue in docs. This is the link "Invalid Host Header" Errors After Configuring Proxy

Thusara Senanayake
  • 44
  • 1
  • 4