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;

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;

• javascript
• reactjs
• axios

• You are not getting any errors on the backend? What do you mean by it is failing to load the response data? – Dylan Lee Commented Feb 25, 2022 at 21:51
• 1 @kaz So when I click on the sign up button i go the network part in the console and I see red in register i then proceed to see whats wrong and im getting "Failed to load response data: No data found for resource with given identifier – kaz Commented Feb 25, 2022 at 21:53
• Can you update your question with details on your routes? If you are using an express backend that would be your index.js file or something similar? – Dylan Lee Commented Feb 25, 2022 at 21:54
• 2 I was getting this error in my Angular / MVC app. Turns out I had test data with Null in DateTime fields in my database. Updated my data with dates, and it found data to load as my response. – Cwinds Commented May 3, 2022 at 23:01
• 1 I think this is a Chrome browser specific bug. Have you tried with Firefox for instance? windowsreport.com/chrome-failed-to-load-response-data – hlovdal Commented Sep 21, 2022 at 9:12

2 Answers 2

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.

Try again after running your back-end server. (like laravel, nodejs, etc)