HTTP requests in React app are not working over a network connection, but they are working on localhost

Question

I’ve been building a React app for a while now and have been testing responsiveness across multiple devices.

The React app itself works perfectly fine on my local machine. When accessing the React instance over the network, all HTTP requests fail because it wants to send HTTP requests to port 3000 instead of port 5000 which is what my Node.js server is running on.

[1] Compiled successfully!
[1]
[1] You can now view client in the browser.
[1]
[1]   Local:            http://localhost:3000
[1]   On Your Network:  http://192.168.1.122:3000

[0] [nodemon] starting `node server.js`
[1] Compiled successfully!
[1] webpack compiled successfully
[0] Server is running on port 5000
[0] MongoDB Connected!

Example of a request in the React app

  // Submit application to database
  const storeAndSubmit = (formData) => {
    try {
      // eslint-disable-next-line
      const res = axios({
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        url: 'http://localhost:5000/api/applications',
        data: formData,
      });
      dispatch({
        type: APPLICATION_SUCCESS,
        payload: formData.pageNumber,
      });
    } catch (err) {
      dispatch({
        type: APPLICATION_FAIL,
      });
    }
  };

Because I don’t know what IP address React will choose when running my start script, I can’t just hard code the IP address into the request. Is there a React environment variable that can be accessed that has the current local network IP address after the start script has been run? If so, I can use that in my HTTP requests and I think that might work.

Error example over the network

xhr.js:210          POST http://192.168.1.122:3000/api/applications 404 (Not Found)

Answer 1

One thing you can do is proxy your requests by adding the following to your package.json file: "proxy": "http://localhost:5000",

Now in your fetch or Axios calls you can use the following URL '/api/applications' instead of 'http://localhost:5000/api/applications'