Spring Boot+MongoDB+React：前端POST仅生成ID未入库求助

Hey there! Let's break down why your React POST request is only generating an ID but not saving actual product data—this is a super common gotcha when pairing Spring Boot + MongoDB with React, so let's fix it step by step.

1. First, Rule Out CORS Issues #

Postman doesn't enforce browser-origin restrictions, but React does. If your Spring Boot backend isn't configured to accept requests from your React app's origin, the browser might silently block parts of the request (like the request body) even if it looks like the POST went through.

Fix: Add CORS Configuration #

Either annotate your controller to allow your React origin:

@RestController
@CrossOrigin(origins = "http://localhost:3000") // Replace with your React app's URL/port
@RequestMapping("/api/products")
public class ProductController {
    // Your endpoint logic here
}

Or set up a global CORS config for all endpoints:

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

2. Verify Your React Request Format #

Postman automatically sends JSON with the correct Content-Type header, but React's fetch or axios might not—if your request body isn't serialized properly or lacks the right header, Spring can't parse it into your Product object.

Example of Wrong React Fetch: #

// ❌ Missing Content-Type header and un-serialized body
fetch('/api/products', {
  method: 'POST',
  body: { name: "Laptop", price: 999.99 }
})

Correct React Fetch: #

// ✅ Properly serialized JSON and Content-Type header
fetch('/api/products', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: "Laptop", price: 999.99 })
})

For Axios Users: #

Axios defaults to application/json, but double-check you aren't overriding headers incorrectly:

// ✅ This works (Axios handles serialization and headers automatically)
axios.post('/api/products', { name: "Laptop", price: 999.99 })

3. Check Your Product Model Class #

Spring's Jackson library needs proper access to your model's fields to map JSON to objects. Missing getters/setters or a no-arg constructor will cause all fields (except the auto-generated ID) to be null.

Correct Product Model Example: #

import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;

@Document(collection = "products")
public class Product {
    @Id
    private String id;
    private String name;
    private double price;

    // ✅ Required no-arg constructor (Spring needs this to instantiate the object)
    public Product() {}

    // Optional: Full-arg constructor for convenience
    public Product(String name, double price) {
        this.name = name;
        this.price = price;
    }

    // ✅ Getters and Setters for all fields
    public String getId() { return id; }
    public void setId(String id) { this.id = id; }
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
    public double getPrice() { return price; }
    public void setPrice(double price) { this.price = price; }
}

4. Debug the Incoming Request in Spring Boot #

Add logging to your controller to confirm if Spring is receiving the correct data:

@PostMapping
public ResponseEntity<Product> createProduct(@RequestBody Product product) {
    // Print received data to check if fields are null
    System.out.println("Received Product: Name=" + product.getName() + ", Price=" + product.getPrice());
    
    Product savedProduct = productRepository.save(product);
    return ResponseEntity.ok(savedProduct);
}

If the output shows Name=null, Price=0.0, go back to steps 2 and 3—your request isn't being parsed correctly.

5. Double-Check Your Repository Setup #

Ensure your repository extends MongoRepository and is scanned by Spring Boot:

import org.springframework.data.mongodb.repository.MongoRepository;

// ✅ Extend MongoRepository with your model and ID type
public interface ProductRepository extends MongoRepository<Product, String> {
}

Make sure the repository class is in the same package (or a sub-package) as your main Spring Boot application class—this ensures Spring auto-discovers it.

Start with checking your React request format and CORS config—those are the most likely culprits here. Let me know if any of these steps fix your issue!

内容的提问来源于stack exchange，提问作者Mayank Purohit