0

Ola, estou tentando criar um usuario, mas ao enviar o método post com os dados do usúario eu recebo um 400 Bad Request do servidor, o problema é que o servidor não está entendendo os dados, no erro aparece como se todos os campos estivessem faltando.

Segue prints e o código:

import { Request, Response } from 'express';
import { getRepository } from 'typeorm';
import * as Yup from 'yup';

import User from '../models/users';
import UserView from '../views/users_view';

export default {
    async login(request: Request, response: Response) {
        // const userReposity = getRepository(User);

        // const {
        //     userName,
        //     userPassword,
        // } = request.body;
    },

    async createUser(request: Request, response: Response) {
        
        const {
            userName,
            userPassword,
            access_level,
        } = request.body;
        
        const userReposity = getRepository(User);

        const data = {
            userName,
            userPassword,
            access_level
        }

        const schema = Yup.object().shape({
            userName: Yup.string().required('Nome obrigatório'),
            userPassword: Yup.string().required('Senha obrigatória'),
            access_level: Yup.string().required('Nível de acesso obrigatório'),
        })

        await schema.validate(data,
            { abortEarly: false }
        );

        const user = userReposity.create(data);

        await userReposity.save(user);

        return response.status(201).json(user);
    }

}

Codigo do front end:

import api from '../services/api'

import '../styles/pages/login-page.css';

export default function Login() {

    const history = useHistory();

    const [name, setName] = useState('');
    const [password, setPassword] = useState('');

    async function handleSubmitLogin(event: FormEvent){
        event.preventDefault();

        const data = new FormData();

        data.append('userName', name);
        data.append('userPassword', password);

        await api.post('usercreate', data);

        history.push('/dashboard');
    }

    return (
        <div className="containerLogin">
            <Link to="/app">
                <FiArrowLeft size={32} color="#FFF" className="button-GoBack" />
            </Link>
            <div className="container-inputs">
                <form className="container-inputsLogin" onSubmit={handleSubmitLogin}>
                    <h1 className="text-login">Login</h1>
                    <div className="input-blockLogin">
                        <label htmlFor="name">
                            <FiUser size={32} color="#FFF" className="icon-input" />
                        </label>
                        <input
                            id="name"
                            value={name}
                            onChange={event => setName(event.target.value)}
                            placeholder="Nome de usúario" />
                    </div>
                    <div className="input-blockLogin">
                        <label htmlFor="password">
                            <FiKey size={32} color="#FFF" />
                        </label>
                        <input
                            className="input-password"
                            id="password"
                            value={password}
                            onChange={event => setPassword(event.target.value)}
                            placeholder="Senha"
                            type="password" />
                    </div>
                    <button className="confirm-button" type="submit">
                        ENTRAR
                        <FiArrowRight size={28} color="#141414" className="button-arrow"/>
                    </button>
                </form>
            </div>
        </div>
    )

}

Print do erro no insomnia

1 Resposta 1

3
+50

Você não precisa criar um formData para isso, basta passar os campos direto no body da requisição. Exemplo:

await api.post('usercreate', { userName: name, userPassword: password });

Ou se quiser trabalhar com formData você precisa configura para seu service api para receber requisição com conteúdo do tipo: "multipart/form-data"

Segue um exemplo dessa configuração usando a biblioteca axios:

const http = axios.create({
  baseURL: 'https://example.com',
  timeout: 15000,
  headers: { "Content-Type": "multipart/form-data" }
});

ou

axios.post('https://example.com', form, { headers: {"Content-Type": "multipart/form-data"}})

Agora na parte da API você pode usar a biblioteca Multer para te ajudar a trabalhar com o formData, caso não queria utilizar o formato json

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .