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>

@DanPhilip Nope, I'm getting the same error there. I'm not sure why, as I'm modeling this API on another project I've done. Should I not be sending both get and post requests to the /api/posts? — ipenguin67
– ipenguin67, Commented Feb 20, 2019 at 7:24
@molamk In Postman? I'm sending a POST request to localhost:3000/api/posts with body fields of title: test and location: thailand — ipenguin67
– ipenguin67, Commented Feb 20, 2019 at 7:30
So that's the problem. You're sending on port 3000, but listening on port 5000 — molamk
– molamk, Commented Feb 20, 2019 at 7:32

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 20, 2019 at 7:38

molamk

4,1161 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Arootin Aghazaryan Over a year ago

if this was true the error "Cannot POST /api/posts" would not appear.

molamk Over a year ago

How is that? React runs by default on port 3000, which does not support POST requests on a /api/posts route. The message is valid

Arootin Aghazaryan Over a year ago

hm, I think if he got this error it means that he could connect to the server, but the route was not found on server. If there was a connection error like this, the request would just time out without receiving any response.

molamk Over a year ago

This is just factually wrong. React catches the request and returns Cannot POST /api/posts. You can try it yourself, [here's a link where you can try that]

ipenguin67 Over a year ago

@molamk So to ensure I'm understanding, in my form, I would change the action to "/api/posts:5000"? Would this also work in a production environment?

|

Arootin Aghazaryan · Accepted Answer · 2019-02-20 07:37:40Z

1

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.

answered Feb 20, 2019 at 7:37

Arootin Aghazaryan

8489 silver badges16 bronze badges

Comments

Dan Philip Bejoy · Accepted Answer · 2019-02-20 07:21:41Z

0

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);

answered Feb 20, 2019 at 7:21

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges

2 Comments

molamk Over a year ago

True. But that does not solve the problem, since in the original case the first router on /api/posts is called

ipenguin67 Over a year ago

Thanks for catching that! It's still throwing the same error when I post though.

bitdoctrine · Accepted Answer · 2022-04-14 22:03:43Z

0

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.

answered Apr 14, 2022 at 22:03

bitdoctrine

1

Comments

John · Accepted Answer · 2022-08-25 22:30:55Z

0

I was experiencing the same issue and it took me almost half an hour to debug and find the solution.

The error:

In my case, on the server side, I had used "get" request to declare createPosts instead of "post" request.
I just changed the "get" request on createPosts to "post", and everything worked fine. I was able to post on the frontend and get a the data.

answered Aug 25, 2022 at 22:30

John

1252 silver badges6 bronze badges

Collectives™ on Stack Overflow

Node/Express Cannot POST error (React frontend)

5 Answers 5

Notes

10 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Notes

10 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related