reactjs - Requests.js:7 GET http://localhost:3001/testing net::ERR_CONNECTION_REFUSED. Apache Server, Express, React App, Fetching , Hosting

Question

I have searched and there is a ton of questions just like this with the full code with the issue, but when reading the comments and posts, there are suggestions and they say they tried something and it worked but don't post the actual changes they made explicitly. I will actually do this.

So this is me not knowing how to setup the communications between a React App and server when publishing. So in testing and on the machine that is hosting... the fetch() works great. When I try it on another laptop or my phone I get Requests.js:7 GET http://localhost:3001/testing net::ERR_CONNECTION_REFUSED.

I setup the server using Apache and a raspberrypi for testing.

From what I read I think it might have to do with localhost on another computer isn't local. How do I get this to work?

Here is an example link: http://uptoptest.hopto.org/

Here is the code for the example link: https://github.com/monochromaticmau/testingLiveWebsite

Should I provide the folder of the apache stuff? I think this is a simple thing that i'm just missing how to properly make the server.js available the right way.

Requests.js

const Data = {};
const baseUrl = 'http://localhost:3001'

Data.getTest = () => {
  let url  = `${baseUrl}/testing`;
  return fetch(url).then(response => {
    if (!response.ok) {
      return new Promise(resolve => resolve([]));
    }
    return response.json().then(jsonResponse => {
      return jsonResponse.test
    });
  });
};

server.js

const express = require('express')
const app = express()
const cors = require('cors')


const PORT = process.env.PORT || 3001

app.use(express.static('public')); //'public' folder contains js, css, images

app.use(cors());
app.use(express.json());

app.use((req,res,next)=>{
    console.log(`Request!!`)
    console.log(req.originalUrl)
    console.log(req.path)
    
    //res.setHeader('Access-Control-Allow-Origin', '*')
    next();
})

app.get('/testing', (req,res,next)=>{
    console.log('TEST REQUEST')
    res.send({test: "Data blah blah"})
})




app.listen(PORT, ()=>{
    console.log(`Listening on Port ${PORT}`)
})

//Used for Testing Server
module.exports = app;

You guys are pretty smart people here... please don't hack into my little pi, if you know how.

question from:https://stackoverflow.com/questions/65546155/requests-js7-get-http-localhost3001-testing-neterr-connection-refused-apa

Answer 1

The solution was simple. I had to update const baseUrl = 'http://localhost:3001' to const baseUrl = 'http://uptoptest.hopto.org:3001' and open up the port 3001 on my router.