I keep getting bad request when implementing POST request using axios. What could be the problem and how do I go about it

Question

BadRequestError with axios post request

this is the error message that I am getting this is the code section for getting input data from the form and sending a post request to my login url with the data obtained from the login form

import { useState } from "react";
import { BiShow, BiHide } from "react-icons/bi";
import { useDispatch} from "react-redux";
import axios from 'axios';
/* import { loginState } from "../providers/userProvider/loginReducer"; */

const Login = () => {
    const [showPassword, setShowPassword] = useState(false);
    const [loginData, setLoginData] = useState({
        email: "",
        password: ""
    })
    const loginURL = `http://localhost:8000/api/v1/users/login`;
    const dispatch = useDispatch();
    // collection information from the form
    const handleOnchange = (e) =>{
        const {name, value} = e.target;
        setLoginData((prev) => {
            return {
                ...prev,
                [name] :value
            }
        })
    }

    // for submiting login data to backend
    const handleSubmit = async(e) => {
        e.preventDefault();
        const {email, password} = loginData;
        if (email && password) {
            //console.log(loginData);
            try {
                axios.post(loginURL, loginData).then(function (response) {
                    console.log(response)
                }).catch(function (error) {
                    console.log(error);
                })
            } catch (error) {
                console.log(error);
            }
        }
    }

this is the Error message
BadRequestError: request aborted
    at IncomingMessage.onAborted (D:\open source contributions\I can Help\ICan-Help_Foundation\backend-APIs\node_modules\raw-body\index.js:238:10)
    at IncomingMessage.emit (node:events:513:28)
    at IncomingMessage._destroy (node:_http_incoming:224:10)
    at _destroy (node:internal/streams/destroy:109:10)
    at IncomingMessage.destroy (node:internal/streams/destroy:71:5)
    at abortIncoming (node:_http_server:754:9)
    at socketOnClose (node:_http_server:748:3)
    at Socket.emit (node:events:525:35)
    at TCP.<anonymous> (node:net:322:12)

Answer 1

some suggestions from my side:

Check if your backend server is accepting requests originating from localhost:3000

1. http://localhost:8000/api/v1/users/login - check this server's cors policy - it should accept requests from localhost:3000

2. if the request is reaching the server but failing - check the error message in localhost:8000 ( use try-catch).

3. not sure about whether we can pass a react state object as post request body - you can try to make to new object from state and pass the new object

   const userData = { email:loginData.email, password:loginData.password }

you can remove async from handleSubmit function.