Get Http: //Localhost:3000/Hello 404 (Not Found)
I Am Following Tutorial for Implementing Mern but I Got Stuck with the Error That Says: Get 404 (Not Found) I Did Everything Correct but I Can Not Get Around...
I am following tutorial for implementing MERN but I got stuck with the error that says: GET 404 (Not Found) I did everything correct but I can not get around the problem. Below are my files, Can anyone form the community help so I can move forward. I really appreciate your help. Thank you all.
Frontend Folder: App.js
import React, { Component} from 'react' ;
// import logo from './logo.svg';
import './App.css';
import axios from 'axios' ;
class App extends Component {
state = {
hello: null
}
componentDidMount() {
axios.get('/hello')
.then( res => this.setState({ hello: res.data }))
.catch( err => console.log(err) )
}
render() {
return (
<div>
{this.state.hello
? <div> {this.state.hello} </div>
: null }
</div>
);
}
}
export default App;
Backend Folder: App.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
//import the 'routes' file
var indexRouter = require('./routes')
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// use indexRouter
app.use('/', indexRouter);
module.exports = app;
routes
var express = require('express');
var router = express.Router()
router.get('/hello', function(req, res) {
res.json('hello world') ;
})
// this is exported to app.js in the Server folder
module.exports = router ;
Frontend Folder: package.json
...
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"proxy": "", <==== pointing to localhost
"browserslist": {
"production": [
">0.2%",
...
1 Answer
Ok, i took your code and first issue is that your request is sent to - meaning it will take port of your frontend (assume you want to run FE and BE separately, ports 3000 and 3001 for instance)
After i fix axios.get('/hello') with axios.get('), we get to the second issue. I get CORS issue.
In order to fix this we have to configure cors on our express backend - .
Actions: npm i cors and add app.use(cors());
Now if we re-run our backend with node index.js and refresh our frontend page - we get response 200 OK.
And third issue is - you don't have app.listen(). app.listen(PORT, () => console.log(`app listening at ))
Ok here is the code. First, i removed all extra dependencies for which i thought are not relevant for this case. Then after i make it all working, i put them back, but on some places i might forgot to return all. Also i put your get route directly in index.js - so that differs as well from your code (you put it in separate module). As I say, i tried to keep things simple and easy to grasp.
BE (i run it with node index.js
var express = require('express');
var path = require('path');
var cors = require('cors')
var createError = require('http-errors');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var app = express();
const PORT = 3000;
app.use(cors())
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(logger('dev'));
app.use(cookieParser());
app.get('/hello', function(req, res) {
res.send('hello world') ;
})
app.listen(PORT, () => console.log(`app listening at ))
module.exports = app;
FE (start it with npm start - it is create-react-app - port 3001, because backend runs on port 3000)
export class App extends React.Component {
state = {
hello: null
}
componentDidMount() {
axios.get(')
.then( res => this.setState({ hello: res.data }))
.catch( err => console.log(err) )
}
render() {
return (
<div>
{this.state.hello
? <div> {this.state.hello} </div>
: null }
</div>
);
}
}
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
