Failed to load response data : No data found for resource with given identifier

Question

I am making a registration form in react and trying to send a request using the axios API. I'm getting no errors in the code, but when I click the sign up button, then go to the console, then go to the network, I see that it's failing to load the response data.

The error I am getting is:

Failed to load response data : No data found for resource with given identifier

export class Register extends React.Component {

    handleSubmit = e => {
        e.preventDefault();
        const data = {
            first_name: this.firstName,
            last_name: this.lastName,
            email: this.email,
            password: this.password,
            password_confirm: this.confirmPassword
        };

        axios.post('http://localhost:8000/Register', data).then(
            res => {
                console.log(res)
            }
        ).catch(
            err => {
                console.log(err);
            }
        )
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit} >
                <h3>Sign Up</h3>

                <div className="form-group">
                    <label> First Name</label>
                    <input type="text" className="form-control" placeholder="First Name"
                        onChange={e => this.firstName = e.target.value} />
                </div>

                <div className="form-group">
                    <label> Last Name</label>
                    <input type="text" className="form-control" placeholder="Last Name"
                        onChange={e => this.lastName = e.target.value} />
                </div>

                <div className="form-group">
                    <label> Email</label>
                    <input type="email" className="form-control" placeholder="Email"
                        onChange={e => this.email = e.target.value} />
                </div>

                <div className="form-group">
                    <label> Password</label>
                    <input type="password" className="form-control" placeholder="Password"
                        onChange={e => this.password = e.target.value} />
                </div>`

                <div className="form-group">
                    <label> Confirm Password</label>
                    <input type="password" className="form-control" placeholder="Confirm Password"
                        onChange={e => this.confirmPassword = e.target.value} />
                </div>`

                <button className="btn btn-primary btn-block" > Sign Up</button>

            </form >
        );

    }
}

export default Register;

Answer 1

change cors options in your backend server

---

When hitting API from postman, even if the API fails, it will give you a response(500, 400, 401). but when hitting from UI, if it is giving you empty response. like below

You need to do this: In frontend, I was using Vite so the port number is 5173. I had to add this port number in cors option in my backend express server. This fixed the issue for me. Hope this helps you.