ReactJS - Failed to load resource: the server responded with a status of 404 (Not Found)

Question

I totally new to ReactJS.

And I follow this tutorial in YouTube and I follow each steps.

Until I found my code got an error like this

Since I new to programming ReactJS, I still dont understand what to do, and how can I fix this

The tutorial shows how to build a simple CRUD app built in ReactJS and PostgreSQL

Here I provide my App.js code

import React, { Component } from 'react'; 
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(){
   super(); 
   this.state={
   title: 'Simple Guestbook',
  guestbooks: []
}
}
componentDidMount(){
console.log('Component has mounted')
}
addGuest(event){
event.preventDefault();

let data = {
  guestname: this.refs.guestname.value,
  guestaddress: this.refs.guestaddress.value
};
var request = new Request("http://localhost:3000/api/new-guest", {
  method: 'POST',
  headers: new Headers({'Content-Type': 'application/json'}),
  body: JSON.stringify(data)
});

//xmlhttprequests
fetch(request)
  .then(function(response){
    response.json()
      .then(function(data){
        console.log(data)
      })
  })
  }
render() {
let title = this.state.title;
return (
  <div className="App">
<h1>Assalaamu'alaykum</h1>
    <h2>{title}</h2>
    <form ref="guestbookForm">
      <input type="text" ref="guestname" placeholder="guest name"/>
      <input type="text" ref="guestaddress" placeholder="guest address"/>
      <button onClick={this.addGuest.bind(this)}>Add Guest</button>
    </form>
  </div>
);
}
}
export default App;

And here is my server.js code:

 let express = require('express');
    let bodyParser = require('body-parser');
    let morgan = require('morgan');
    let pg = require('pg');

    const PORT = 3000;

    let pool = new pg.Pool({
    port:5432,
    password: 'qwerty',
    database: 'guestbook',
    max: 10,
    host: 'localhost',
    user: 'postgres'
    });

    let app = express();

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended: true}));

    app.use(morgan('dev'));
    app.use(function(request, response, next) {
       response.header("Access-Control-Allow-Origin", "*");
       response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
      });
      app.post('/api/new-guest', function(request, response){
    console.log(request.body);
      });
      app.listen(PORT, () => console.log('Listening to Port '+ PORT));

What should I do? Any suggest will help me to solve this

Thank you...

This hardly has any significant detail to answer this. It's also almost 3 years old, so ... — oligofren, Jul 01 '21 at 09:10

score -1 · Answer 1 · answered Sep 27 '18 at 06:35

-1

Use Arrow funtion,

fetch(request)
  .then((response) => {
    return response.json()
  }).then((data) => {
        console.log(data)
 })

answered Sep 27 '18 at 06:35

Anshuman Singh

51
10

Hi Anshuman, I have try what you suggested to me. But it still throw. 'Failed to load resource: the server responded with a status of 404 (Not Found)' Should I create something so the server can find that is not found? – Rendy Sep 27 '18 at 06:55
Im not changing anything, Any idea? Am I missed something? Thanks – Rendy Sep 27 '18 at 07:09

ReactJS - Failed to load resource: the server responded with a status of 404 (Not Found)

1 Answers1