Почему не отправляются данные через axios?

Question

[ZarGent]

App.js

import { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {

  const [name, setName] = useState("");


  function addCat(){
    axios({
      url: "http://localhost:3001/api/add/item",
      method: "POST",
      data: name
    })
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
  }

  function changeName(e){
    setName(e.target.value);
  }

  return (
    <div className="App">
      {infa.map((item) => {
        return(
          <div key={item.id}>
            <p>{item.name}</p>
          </div>
        )
      })}
      <input type="text" value={name} onChange={changeName}/>
      <div className="button" onClick={() => addCat()}>Добавить кота</div>
    </div>
  );
}

export default App;

db.js, где прописана функция addItem

const { MongoClient } = require('mongodb');

class GetAll {
    constructor() {
        this.db = null;
    }

    async connect(SuccessText) {
        const uri = 'mongodb://127.0.0.1:27017';
        const client = new MongoClient(uri);
        try {
            await client.connect();
            this.db = client.db('test');
            console.log(SuccessText);
        } catch (error) {
            console.error(error);
        }
    }

    async getItems() {
        if (!this.db) {
            return "Database connection not established";
        }

        const collection = this.db.collection('cats');
        const item = await collection.find().toArray();
        return item;
    }

    async addItem(nameVal) {
        if (!this.db) {
            return "Database connection not established";
        }
        const text = nameVal ? nameVal : 'Дефолтный name';
        const collection = this.db.collection('cats');
        collection.insertOne({name : text})
    }
}

module.exports = GetAll;

index.js файл, в котором прописаны роуты

const Router = require('express');
const router = new Router();
const addRouter = require('../routes/addRouter')
const getRouter = require('../routes/getRouter')

router.use('/add', addRouter)
router.use('/get', getRouter)

module.exports = router;

addRouter.js, где вызывается функция addItem.

const Router = require('express');
const GetAll = require('../db');
const router = new Router();
const funcs = new GetAll();

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

    funcs.connect('Add functions is active');
    await funcs.addItem(req.body);
    res.send(req.body)
    console.log('req: ' + req.body)
})

module.exports = router;

Url для axios запроса прописан правильно, прочие пути к файлам / директориям тоже. Состояние name так же корректно отправляется на сервер, но когда получаю response, пишет, что тело запроса пустое. Если вывожу req.body в консоль, то выдаёт undefined.

Всё сделано на локальном сервере

index.js в корневой директории сервера

const express = require('express');

const app = express();
const cors = require('cors');
const circularJSON = require('circular-json');
const PORT = 3001;
const routes = require('./routes/index')

app.use(cors())
app.listen(PORT, () => {
    console.log('Сервер запущен на порту ' + PORT);
})

app.use('/api', routes);

Answer 1

[Camaro67]

Попробуйте так:

const express = require('express');

const app = express();
const cors = require('cors');
const circularJSON = require('circular-json');
const PORT = 3001;
const routes = require('./routes/index')

app.use(cors())
app.use(express.json()); // Добавьте эту строку для парсинга JSON данных
app.listen(PORT, () => {
    console.log('Сервер запущен на порту ' + PORT);
})

app.use('/api', routes);

Answer 2

[HireHoffee]

Проблема в том, что `express` не может обработать тело запроса в формате JSON по умолчанию. Необходимо добавить middleware для парсинга JSON в express приложении. Это делается с помощью встроенного `express.json()` middleware.

Вот как можно изменить index.js файл в корневой директории сервера, чтобы добавить поддержку для JSON:

const express = require('express');

const app = express();
const cors = require('cors');
const circularJSON = require('circular-json');
const PORT = 3001;
const routes = require('./routes/index')

app.use(cors());

// Добавить эту строку для парсинга JSON
app.use(express.json());

app.listen(PORT, () => {
    console.log('Сервер запущен на порту ' + PORT);
})

Эта строка `app.use(express.json());` добавляет middleware, которое парсит тело JSON-запросов и делает его доступным в `req.body`.

Кроме того, убедитесь, что вы отправляете данные в правильном формате из клиента. В `axios` запросе данные должны быть объектом, а не строкой. Вот как должен выглядеть ваш `addCat` метод в `App.js`:

function addCat() {
  axios({
    url: "http://localhost:3001/api/add/item",
    method: "POST",
    data: { name: name }  // Данные должны быть объектом
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });
}

Таким образом, ваш код должен работать корректно. Теперь, когда вы отправляете данные с клиента, сервер сможет правильно обработать тело запроса и сохранить данные в базу данных.