CODEWITHSUNDEEP
node.jsreactjsexpressaxioscors
Pamela Rojas
Pamela Rojas

Reputation: 67

GET http://localhost:3000/:/localhost:4000 404 (Not Found)

I am learning react and nodejs, I'm trying from react to call what I have on my backend, with axios, and cors but I get the following error:

GET http://localhost:3000/://localhost:4000/estudiantes 404 (Not Found)

enter image description here

This is my App.js

function App() {

const [estudiante, guardarEstudiante] = useState([]);

useEffect(() => {
  const consultarApi = () =>{
    clienteAxios.get('/estudiantes')
    .then(respuesta =>{
      console.log(respuesta)

    })
    .catch(error =>{
      console.log('desde catch')
      console.log(error)
    })
  }
  consultarApi();
});

  console.log(process.env.REACT_APP_BACKEND_URL);
  return (
    <Router>
      <Switch>
        <Route exact path="/" component = {Estudiante}/>   
        <Route exact path="/user" component = {User}/>
        
      </Switch>
    </Router>
  );
}

export default App;

This is my index.js from back

const express = require('express');
const mongoose = require('mongoose');
const routes = require('./routes');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(cors());

mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/bremm', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
 
app.use('/',routes())

app.listen(4000, ()=> {
    console.log('Servidor funcionando')
})

My .env file

REACT_APP_BACKEND_URL = http::/localhost:4000

My config file

import axios from 'axios';
const clienteAxios = axios.create({
    baseURL: process.env.REACT_APP_BACKEND_URL

});
export default clienteAxios;

My routes from Backend

const express = require('express');
const router = express.Router();
const estudianteController = require('../controllers/estudianteController');
const userController = require('../controllers/userController');

module.exports = function(){
    router.get('/',()=>{
        console.log('En home')
    });
    router.post('/estudiante',estudianteController.nuevoEstudiante);
    router.get('/estudiantes',estudianteController.getEstudiantes);
    router.get('/estudiante/:id',estudianteController.getEstudiante);
    router.put('/estudiante/:id',estudianteController.updateEstudiante);
    router.delete('/estudiante/:id',estudianteController.deleteEstudiante);


    return router;
}

the method getEstudiantes() fetches all the students from the database and is what should be printed instead of the error, as seen in the following image if I enter from the url of node

enter image description here

I hope you can help me, I know I am a newbie with react and node :(

Upvotes: 0

Views: 2353

Answers (1)

Daniel Alves
Daniel Alves

Reputation: 98

To me it seems as though you have mal-formatted the backend url in your .env file. From what I can see in the error message, http://localhost:3000/://localhost:4000/estudiantes, you are not directly contacting your backend but appending the endpoint to the location of the frontend. You probably want to isolate the http://localhost:4000/estudiantes. Try Changing

REACT_APP_BACKEND_URL = http::/localhost:4000

to

REACT_APP_BACKEND_URL = http://localhost:4000

note the difference in the forward slash.

Alternatively, you could create a new file api.js which would look like the following:

export default "http://localhost:4000";

which you can then import into your page like so:

import API from './path/to/api.js';
...
clienteAxios.get(API+'/estudiantes');

Upvotes: 1

Related Questions