Node/Express Cannot POST error (React frontend)

Question

For my React/Express app, I've already built my backend API in Express, including a route for posting a blog post (/api/posts). On the front end, I built a form with a method of POST that submits to this route, but when I submit the form I get the error "Cannot POST /api/posts".

app.js (Express)

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const session = require('express-session');

const app = express();

//Load routes
const photos = require('./routes/photos');
const posts = require('./routes/posts');
const recs = require('./routes/recs');

// DB config
const db = require('./config/database');

//Connect to mongoose
mongoose.connect(db.mongoURI, {useNewUrlParser: true})
.then(() => console.log('MongoDB connected...'))
.catch(err => console.log(err));

// Body parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));

// Static folder
app.use(express.static(path.join(__dirname, 'public')));

// Express Session Middleware
app.use(session({
  secret: 'secret',
  resave: true,
  saveUninitialized: true,
  //cookie: {secure: true}

}));

//Router
app.use('/api/photos', photos);
app.use('/api/posts', posts);
app.use('/api/posts', recs);


const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

Post Route

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');

// Load Posts model
require('../models/Post');
const Post = mongoose.model('posts')

// Get all posts
router.get('/', (req, res) => {
  Post.find()
    .sort({date:'desc'})
    .then(posts => {
      res.json(posts);
    })
    .catch(err => {
      res.send(err);
    })
});

router.post('/', (req, res) => {
  console.log(req.body); //testing info I receive for now
})

Form

const postForm =
    <div className="form-popup" id="newPost">
      <form action="/api/posts" method="post" className="form-container">
        <h1>New Blog Post</h1>

        <label htmlFor="title"><b>Title</b></label>
        <input type="text" placeholder="Blog Post Title" name="title" required />

        <label htmlFor="location"><b>Location</b></label>
        <input type="text" placeholder="Location" name="location" required />

        <textarea placeholder="Your post here" name="content" required />

        <button type="submit" className="btn">Post</button>
        <button type="submit" className="btn cancel" onClick={this.handleClose}>Close</button>
      </form>
    </div>

Answer 1

From our exchange in the comment, here's the problem

• The request is sent to port 3000
• The Node.js server is listening on port 5000.

To solve that you just need to format your request to http://localhost:5000/api/posts

Notes

• You still need to run React and Node.js on different ports
• You only need to change the port for your HTTP request

Answer 2

At the end of Post Route you have to export it.

module.exports = router;

this makes you be able to import it in app.js like you did.

Answer 3

There are two routes with same endpoint.

//Router
app.use('/api/photos', photos);
app.use('/api/posts', posts);
app.use('/api/posts', recs);

I think you wanted a different endpoint for the third route.

//Router
app.use('/api/photos', photos);
app.use('/api/posts', posts);
app.use('/api/recs', recs);

Answer 4

The action route on the form does not match the post route on the server side.

<form action="/api/posts" method="post" className="form-container">

router.post('/', (req, res) => {

The action route should match the post route for the post action to work.