SpringbootPotsIssue.txt

# 📡 Sending Data from Frontend to Spring Boot (POST Request)

## 🚨 Problem

When sending data using `fetch` from JavaScript to a Spring Boot backend, you might encounter errors like:

* `400 Bad Request`
* `HttpMessageNotReadableException`
* Backend not receiving data correctly

### ❌ Incorrect Example

```javascript
const response = await fetch("http://localhost:8080/employees/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: {
    firstName: "alice",
    lastName: "bob"
  }
});
```

### 🔴 Why This Fails

* `body` is a **JavaScript object**, not JSON.
* The browser converts it to:

```
[object Object]
```

* This is **not valid JSON**, so Spring Boot cannot parse it.

---

## ✅ Solution: Use `JSON.stringify`

### ✔️ Correct Example

```javascript
const response = await fetch("http://localhost:8080/employees/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    firstName: "alice",
    lastName: "bob",
    email: "bob@gmail.com",
    phoneNumber: "+21629183455",
    hireDate: "2024-02-10"
  })
});

const data = await response.json();
console.log(data);
```

---

## 🧠 How It Works

| Step                             | Explanation                           |
| -------------------------------- | ------------------------------------- |
| `JSON.stringify()`               | Converts JS object → JSON string      |
| `Content-Type: application/json` | Tells backend to expect JSON          |
| Spring Boot                      | Automatically maps JSON → Java object |

---

## ☕ Spring Boot Backend Example

### DTO Class

```java
public class EmployeeDTO {
    private String firstName;
    private String lastName;
    private String email;
    private String phoneNumber;
    private String hireDate;

    // Getters & Setters
}
```

---

### Controller

```java
@PostMapping("/create")
public Employee createEmployee(@RequestBody EmployeeDTO dto) {
    System.out.println(dto.getFirstName());
    return employeeService.save(dto);
}
```

---

## ⚠️ Important Notes

* Field names in JSON must match Java fields:

```json
{
  "firstName": "alice"
}
```

✔ Matches:

```java
private String firstName;
```

---

## 🔁 Alternative (Without JSON)

You can also send data using `FormData`:

```javascript
const formData = new FormData();
formData.append("firstName", "alice");
formData.append("lastName", "bob");

fetch("http://localhost:8080/employees/create", {
  method: "POST",
  body: formData
});
```

⚠️ In this case, backend must use:

```java
@RequestParam String firstName
```

---

## ✅ Summary

* ❌ Don't send plain JS objects in `fetch`
* ✅ Always use `JSON.stringify()` for JSON APIs
* ✅ Match frontend keys with backend fields
* ✅ Set correct headers

---

## 🚀 Result

After applying this:

* ✔ No more 400 errors
* ✔ Data correctly received in Spring Boot
* ✔ Clean frontend ↔ backend communication

---