Node / Express Cannot POST error (React frontend)

Question

Для моего приложения React / Express я уже построил свой внутренний API в Express, включая маршрут для публикации сообщения в блоге (/ api / posts).На внешнем интерфейсе я создал форму с методом POST, который отправляет этот маршрут, но при отправке формы появляется сообщение об ошибке «Cannot POST /api/posts".

app.js (экспресс)

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

почтовый маршрут

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

Форма

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

В конце Post Route вы должны экспортировать его.

module.exports = router;

это позволит вам импортировать его в app.js, как вы это сделали.

Answer 2

Из нашего обмена в комментарии, вот проблема

• Запрос отправлен на порт 3000
• Сервер Node.js: прослушивание порта 5000 .

Чтобы решить эту проблему, вам просто нужно отформатировать ваш запрос в http://localhost:5000/api/posts

Примечания

• Вам все еще нужно запустить React и Node.js на разных портах
• Вам нужно только изменить порт для HTTP-запроса

Answer 3

Есть два маршрута с одинаковой конечной точкой.

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

Я думаю, что вы хотели другую конечную точку для третьего маршрута.

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