Error 404 in POST with NODE and REACT

Question

I am building an application with nodejs in the back end and React in Frond-end.

I made a registration function but I can not perform the POST, returning:

xhr.js:178 POST http://localhost:3333/users net:ERR_CONECTION_RESET

Code in Frond-end:

services/api.js

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:3333',
});

export default api;

./Routes.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Home from './pages/home';
import Users from './pages/users';

export default function Routes() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/users" exact component={Users} />
            </Switch>
        </BrowserRouter>
    )
}

./pages/users/index.js

    import React, {useState} from 'react';
    import api from '../../services/api';

    export default function Users() {

    const [ firstName, setFirstName ] = useState('');
    const [ lastName, setLastName ] = useState('');
    const [ email, setEmail ] = useState('');
    const [ password, setPassword ] = useState('');

    async function handleUsers(e) {
        e.preventDefault();

        const data = {
            firstName,
            lastName,
            email,
            password
        };

        try{
           const response = await api.post('users', data)
            alert('Cadastro realizado!');
        } catch (err){
            alert('Cadastro não realizado.')
        } 
    }

    return (
        <div className="container">
            <form onSubmit={handleUsers}>
                <input 
                    type="text" 
                    placeholder="Primeiro Nome"
                    value={firstName}
                    onChange={e => setFirstName(e.target.value)}
                />
                <input 
                    type="text" 
                    placeholder="Último Nome"
                    value={lastName}
                    onChange={e => setLastName(e.target.value)}
                />
                <input 
                    type="text" 
                    placeholder="E-mail"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                />
                <input 
                    type="password" 
                    placeholder="Senha"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                />
                <button className="" type="submit">Cadastrar</button>
            </form>
        </div>
    )
}

BACK-END

./src/Routes.js

const express = require('express');

const UserController = require('./controller/UserController');

const routes = express.Router();

routes.post('/users', UserController.create);

module.exports = routes;

./src/controller/Usercontroller.js

const connection = require('../database/connection');

module.exports = {
    async create(request, response) {
        const { firstName, lastName, email, password } = request.body;

        await connection('users').insert({
            idUser,
            firstName,
            lastName,
            email,
            password
        })

        return response.json({
            idUser
        });
    }
}

TABLE:

  table.increments('idUser').primary();
  table.string('firstName').notNullable();
  table.string('lastName').notNullable();
  table.string('email').notNullable();
  table.string('password').notNullable();

CONNECTION

const knex = require('knex');
const configuration = require('../../knexfile');

const connection = knex(configuration.development);

module.exports = connection;

MISTAKES:

FRONTEND:

./src/pages/users/index.js Line 22:18: 'Response' is Assigned a value but Never used no-unused-vars

BACKEND:

(Node:32088) Unhandledpromiserejectionwarning: Unhandled Promise rejection. This error either originated by Throwing Inside of an async Function without a catch block, or by rejecting a Promise which was not handled with . catch(). To terminate the Node process on unhandled Promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)

NAVIGATOR:

POST http://localhost:3333/users net:ERR_CONECTION_RESET

POST http://localhost:3333/users net::ERR_EMPTY_RESPONSE

Answer 1

On the Front you don’t need to set the Sponse constant. It’s not something that will stop your code from working, but it’s interesting that you don’t let loose variables like that.

Look for how to use Eslint/Prettier later, it can help you with this.

    async function handleUsers(e) {
        e.preventDefault();

        const data = {
            firstName,
            lastName,
            email,
            password
        };

        try{
            await api.post('users', data)
            alert('Cadastro realizado!');
        } catch (err){
            alert('Cadastro não realizado.')
        } 
    }