为什么我的表单不会向数据库提交用户信息？

Question

I'd like to know what's wrong in my code in terms of why it's not sending username, email and password to my database via an Axios POST request. My Laravel endpoint works fine because I verified via PostMan. I'm just struggling with the front end portion of this. What am I doing wrong and how can I fix this?

There error I'm getting on my browser says: Cannot POST /register

import React, {Component} from 'react';
import axios from "axios";

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            email: "",
            password: ""
        };
        this.userNameHandler = this.userNameHandler.bind(this);
        this.emailHandler = this.emailHandler.bind(this);
        this.passwordHandler = this.passwordHandler.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    userNameHandler(e) {
        this.setState({
            username: e.target.value,
        });

        console.log(this.state.username);
    }

    emailHandler(e) {
        this.setState({
            username: e.target.value,
        });

        console.log(this.state.email);
    }

    passwordHandler(e) {
        this.setState({
            username: e.target.value,
        });

        console.log(this.state.password);
    }

    handleSubmit(e) {
        const user = {
            name: this.state.name,
            email: this.state.email,
            password: this.state.password
        }

        this.setState({
            username: e.target.value
        });

        axios.post('http://127.0.0.1:8000/api/auth/signup', user)
            .then(response => {
                console.log(response);
                console.log(response.data);
            });
    }

    render() {
        return (
            <div className="container">
                <div id="login-row" className="row justify-content-center align-items-center">
                    <div id="login-column" className="col-md-6">
                        <div id="login-box" className="col-md-12">
                            <form id="login-form" className="form" method="post" onSubmit={this.handleSubmit}>
                                <div className="form-group">
                                    <label htmlFor="username" className="text-info">Username:</label><br/>
                                    <input type="text" name="username" id="username" className="form-control" onChange={this.userNameHandler}/>
                                </div>
                                <div className="form-group">
                                    <label htmlFor="username" className="text-info">Email:</label><br/>
                                    <input type="text" name="username" id="username" className="form-control" onChange={this.emailHandler}/>
                                </div>
                                <div className="form-group">
                                    <label htmlFor="password" className="text-info">Password:</label><br/>
                                    <input type="text" name="password" id="password" className="form-control" onChange={this.passwordHandler}/>
                                </div>
                                <div className="form-group">
                                    <input type="submit" name="submit" className="btn btn-info btn-md"
                                           value="Submit"/>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Register;

Answer 1

You haven't called e.preventDefault() , so you get a regular form submission to the URL specified in the action attribute. You don't have one of those, but the default URL to submit to is the current URL .

The Ajax request gets cancelled as the browser navigates away from the current page to load a new one (which is the server saying it doesn't support POST requests to that URL).