Question 53880 in Javascript Question posted in
A very good W3school tutorial can be found here.

Invalid host header on mern stack – Javascript

"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.

Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search