Hi guys, I am a beginner with react.js, Moreover, I have been trying to Create a form that will enable a user add input about a Particular department to my web application with a spring boot backend. Furthermore, when i try to use axios http library for that purpose i get the following error: Error: Request failed with status code 400 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.onloadend (xhr.js:66)
Currently i am stuck and dont what to do please help. the following is the component called InputForm.jsx
import axios from "axios";
import React from "react";
class InputForms extends React.Component {
constructor(props){
super(props)
this.state = {
departmentName: '',
departmentCode: '',
departmentAddress: ''
}
}
ChangeDepartname = event => {
this.setState({ departmentName: event.target.value})
}
ChangeDepartCode = event => {
this.setState({ departmentCode: event.target.value})
}
ChangeDepartAddress = event => {
this.setState({ departmentAddress: event.target.value})
}
handleSubmit = event => {
event.preventDefault();
const user = {
departmentName: this.state.departmentName,
departmentCode: this.state.departmentCode,
departmentAddress: this.state.departmentAddress
};
axios.post('http://localhost:8081/', { user } )
.then(res => {
console.log(res);
console.log(res.data);
})
.catch(err => {
console.error(err)
})
}
render() {
return <div>
<form onSubmit={this.handleSubmit}>
<label>
departmentName:
<input type="text" name="departmentName" onChange={this.ChangeDepartname} />
</label>
<br />
<label>
departmentCode:
<input type="text" name="departmentCode" onChange={this.ChangeDepartCode} />
</label>
<br />
<label>
departmentAddress:
<input type="text" name="departmentAddress" onChange={this.ChangeDepartAddress} />
</label>
<br />
<button type="submit">Add</button>
</form>
</div>;
}
}
export default InputForms;
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Hey there,
Based on the error message Request failed with status code 400 and the code snippet of your InputForms component, it seems like the issue is with how the request data is structured or how the server is handling the request. Here are a few suggestions to troubleshoot this further:
-
Check the Data Structure:
- In your
axios.postcall, you are sending an object with a single propertyuserthat contains the form data. Make sure your Spring Boot backend is expecting the data in this format. If not, you may need to adjust the structure of the data you’re sending.
axios.post('http://localhost:8081/', user) .then(res => { console.log(res); console.log(res.data); }) .catch(err => { console.error(err) }) - In your
-
Verify API Endpoint:
- Ensure that the API endpoint
'http://localhost:8081/'is correct. A 400 error can occur if the endpoint is expecting a specific path or parameters that are not provided. For example, your endpoint might actually be something like'http://localhost:8081/api/addDepartment'.
- Ensure that the API endpoint
-
Check Spring Boot Backend:
- Look at the Spring Boot server logs to see more details about the error. The logs may provide insights into why the server is returning a 400 status code.
- Ensure that your Spring Boot controller is correctly configured to accept POST requests and that it’s expecting the right data format.
-
Content-Type Header:
- Sometimes, setting the
Content-Typeheader explicitly can resolve such issues. You can set it toapplication/jsonwhen sending JSON data.
axios.post('http://localhost:8081/', user, { headers: { 'Content-Type': 'application/json' } }) - Sometimes, setting the
Besides that, I would suggest double-checking the names of your form inputs and ensure they match the state properties and the expected properties on the server-side.
Also, you can try testing your API endpoint with a simple hardcoded request using a tool like Postman or a REST client in your browser. This can help you verify that the issue is with the client-side code and not the server or endpoint.
If none of this helps, you can try adding console.log statements in your handleSubmit method to log the user object before making the API call. This will help you confirm that the data structure is as expected.
Along with the console.log statements, you can add error handling in your .catch block to log more details about the error. Sometimes the error object contains response data that can give you more insights.
.catch(err => {
console.error(err.response || err)
})
Best,
Bobby
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.