get a error when i tried request from the server-CodePudding

I develop a little db in mongoo now in the front-end i tried to use my login route with axios.post request but i dont know why i get a error i also console.log the email and the password i send and they good

import axios from "axios";
import React, { useState } from "react";
import './signIn.css'



function Signin() {

    const [email, setEmail] = useState("")
    const [password, setPass] = useState("")

    const login = async () => {
        console.log(email, password)
        const res = await axios.post({
            // mathod: "POST",
            url: `http://127.0.0.1:3000/users/login`,
            data: {
                email: email,
                password: password
            }
        })
        console.log(res)
    }

    return (
        <div className="pop-container">
            <div className="popup">
                <div className="content">
                    <h1>Sign in</h1>
                    <div className="input-field"><input placeholder="Email" className="validate" onChange={(e) => setEmail(e.target.value)} /></div>
                    <div className="input-field"><input placeholder="Password" className="validate" onChange={(e) => setPass(e.target.value)} /></div>
                    <button onClick={(e) => login(e)} className="second-button">Sign in</button>
                    <p>Don't have an account? <a href="/signup.html">Sign Up</a></p>
                </div>
            </div>
        </div>
    );
}

export default Signin;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

the order i send the data in the body axios is coorect and also the url is correct

and i get this error

Uncaught (in promise) 
Object { stack: "AxiosError@http://localhost:3001/static/js/bundle.js:47353:18\nsettle@http://localhost:3001/static/js/bundle.js:47971:12\nonloadend@http://localhost:3001/static/js/bundle.js:46711:66\nEventHandlerNonNull*dispatchXhrRequest@http://localhost:3001/static/js/bundle.js:46724:7\nxhrAdapter@http://localhost:3001/static/js/bundle.js:46666:10\ndispatchRequest@http://localhost:3001/static/js/bundle.js:47806:10\nrequest@http://localhost:3001/static/js/bundle.js:47270:77\nhttpMethod@http://localhost:3001/static/js/bundle.js:47304:19\nwrap@http://localhost:3001/static/js/bundle.js:48325:15\nlogin@http://localhost:3001/static/js/bundle.js:239:69\nonClick@http://localhost:3001/static/js/bundle.js:292:30\ncallCallback@http://localhost:3001/static/js/bundle.js:14325:18\ninvokeGuardedCallbackDev@http://localhost:3001/static/js/bundle.js:14369:20\ninvokeGuardedCallback@http://localhost:3001/static/js/bundle.js:14426:35\ninvokeGuardedCallbackAndCatchFirstError@http://localhost:3001/static/js/bundle.js:14440:29\nexecuteDispatch@http://localhost:3001/static/js/bundle.js:18584:46\nprocessDispatchQueueItemsInOrder@http://localhost:3001/static/js/bundle.js:18610:26\nprocessDispatchQueue@http://localhost:3001/static/js/bundle.js:18621:41\ndispatchEventsForPlugins@http://localhost:3001/static/js/bundle.js:18630:27\n./node_modules/react-dom/cjs/react-dom.development.js/dispatchEventForPluginEventSystem/<@http://localhost:3001/static/js/bundle.js:18790:16\nbatchedUpdates$1@http://localhost:3001/static/js/bundle.js:33182:16\nbatchedUpdates@http://localhost:3001/static/js/bundle.js:14173:16\ndispatchEventForPluginEventSystem@http://localhost:3001/static/js/bundle.js:18789:21\ndispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@http://localhost:3001/static/js/bundle.js:16295:42\ndispatchEvent@http://localhost:3001/static/js/bundle.js:16289:88\ndispatchDiscreteEvent@http://localhost:3001/static/js/bundle.js:16266:22\nEventListener.handleEvent*addEventBubbleListener@http://localhost:3001/static/js/bundle.js:16488:14\naddTrappedEventListener@http://localhost:3001/static/js/bundle.js:18712:33\nlistenToNativeEvent@http://localhost:3001/static/js/bundle.js:18656:30\n./node_modules/react-dom/cjs/react-dom.development.js/listenToAllSupportedEvents/<@http://localhost:3001/static/js/bundle.js:18667:34\nlistenToAllSupportedEvents@http://localhost:3001/static/js/bundle.js:18662:25\ncreateRoot@http://localhost:3001/static/js/bundle.js:35945:33\ncreateRoot$1@http://localhost:3001/static/js/bundle.js:36291:14\n./node_modules/react-dom/client.js/exports.createRoot@http://localhost:3001/static/js/bundle.js:36367:16\n./src/index.js@http://localhost:3001/static/js/bundle.js:646:60\noptions.factory@http://localhost:3001/static/js/bundle.js:50545:31\n__webpack_require__@http://localhost:3001/static/js/bundle.js:49969:33\n@http://localhost:3001/static/js/bundle.js:51191:56\n@http://localhost:3001/static/js/bundle.js:51193:12\n", message: "Request failed with status code 404", name: "AxiosError", code: "ERR_BAD_REQUEST", config: {…}, request: XMLHttpRequest, response: {…} }

code: "ERR_BAD_REQUEST"

config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }

adapter: function xhrAdapter(config)

data: undefined

env: Object { FormData: (), Blob: () }

headers: Object { "Content-Type": null, Symbol("defaults"): {…} }

maxBodyLength: -1

maxContentLength: -1

method: "post"

timeout: 0

transformRequest: Array [ transformRequest(data, headers)
 ]

transformResponse: Array [ transformResponse(data)
 ]

transitional: Object { silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false }

url: Object { url: "http://127.0.0.1:3000/users/login", data: {…} }

data: Object { email: "[email protected]", password: "12345678" }

url: "http://127.0.0.1:3000/users/login"

<prototype>: Object { … }

validateStatus: function validateStatus(status)

xsrfCookieName: "XSRF-TOKEN"

xsrfHeaderName: "X-XSRF-TOKEN"

<prototype>: Object { … }

message: "Request failed with status code 404"

name: "AxiosError"

request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

response: Object { data: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot POST /[object Object]</pre>\n</body>\n</html>\n", status: 404, statusText: "Not Found", … }

please help me thnks

CodePudding user response：

Can you please try this and tell me the results?

const login = async () => {
    console.log(email, password);
    try {
      const res = await axios.post(`http://127.0.0.1:3000/users/login`, {
        email: email,
        password: password,
      });
      
    } catch (error) {
      console.log(error);
    }
  };