Currently, I'm trying to get axios data from node.js. and i can get the result on local url , however after i build it and deploy it, the post method get 404 error. so i tried to use get method to test it. it gets react html result . it's totally okay when i do it on local. but only it doesn't work when i build and deployment.

I assumed it's because proxy problem so i installed http-proxy-middleware library and I try to set up setupProxy.js on my react folder.

this is the example from "https://create-react-app.dev/docs/proxying-api-requests-in-development/"

but it still doesn't work.

i want to know what can make this issue.

//node.js 

app.get("/test", (req, res) => {
  res.send({ hello: "Hello world" });
});


const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, "dist")));
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "dist", "index.html"));
});

//react 

const getTest = () => {
    axios
      .get(`${backend}/test`)
      .then(res => {
        console.log(res.data);
      })
      .catch(err => console.log(err));
  };

CodePudding user response：

The proxy configuration only applies to the webpack-dev-server you use when developing your React app...

Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/todos point to the right thing in production.

I would suggest just using the simpler version by adding this to your package.json

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

You should also make sure your Express app is configured to handle API requests in both dev and production modes. To do so, I'd recommend using the same routes as used in the requests from the front-end...

app.get("/api/test", (req, res) => {
  res.send({ hello: "Hello world" });
});

// or even better

app.use("/api", myApiRouter);

Now your React app can make requests to /api/test in both development and production modes

axios.get("/api/test").then(({ data }) => console.log(data));

In development mode, the proxy configuration will forward the requests to your Express app.

In production mode, your Express app will be serving the built React app via express.static() so they'll be on the same domain.