React.js调用Spring Boot后端POST接口无响应问题求助

Hey there, let's break down why your POST requests aren't updating the database even though the browser says they're sent—this kind of mismatch is super frustrating, but let's go through the most likely culprits step by step.

First, Fix the Request Headers (Biggest Red Flag!) #

Looking at your frontend fetch code, your Content-Type and Accept headers are set to 'nology-brainstorm/json'—that's not a valid MIME type for JSON data. Spring Boot expects the standard application/json to properly parse request bodies. Update those headers immediately, and add error logging to catch hidden issues:

const createNewIS = (e) => {
  return fetch("http://localhost:8080/ideas/create", {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json', // This is the correct MIME type
      'API-Key': 'secret' // Keep this if your backend requires it
    },
    body: JSON.stringify({ 
      "spaceid": 4, 
      "name": newISName, 
      "description": newISDesc 
    })
  }).then(() => {
    updateNewISPopUp(e);
  }).catch(err => {
    // Add this to catch frontend errors you might be missing!
    console.error("POST request failed:", err);
  })
}

Check Backend Parameter Binding #

Make sure your Spring Boot controller method uses the @RequestBody annotation to map the JSON request body to your Java object. Without this, Spring can't convert the incoming JSON into your entity class, and the request body gets ignored entirely:

@PostMapping("/ideas/create")
// Use @RequestBody to bind the JSON body to your Idea object
public ResponseEntity<Idea> createIdea(@RequestBody Idea idea) {
    // Your logic to save the idea to the database
    Idea savedIdea = ideaService.save(idea);
    return ResponseEntity.ok(savedIdea);
}

Verify Backend Logs for Errors #

Enable debug logging for Spring Web in your application.properties to see exactly what's happening when the request hits the backend:

logging.level.org.springframework.web=DEBUG

Look for key logs like:

• HttpMediaTypeNotSupportedException: Confirms the invalid Content-Type header was causing issues.
• MethodArgumentNotValidException: Means the request body doesn't match your entity's fields (e.g., typos in field names).
• Database-related errors (like missing transactions or constraint violations).

Test the Backend Directly (Bypass Frontend) #

Use a tool like Postman or curl to send a POST request directly to your backend endpoint. This will tell you if the issue is with the frontend or backend:

curl -X POST http://localhost:8080/ideas/create \
  -H "Content-Type: application/json" \
  -H "API-Key: secret" \
  -d '{"spaceid": 4, "name": "Test Idea", "description": "Test Description"}'

If this request works (and the database updates), the problem is in your frontend code. If it fails, focus on fixing the backend (check service layer logic, database transactions, or entity mappings).

Check Field Name Matching Between Frontend and Backend #

Double-check that the field names in your JSON request body match the field names in your Java entity class exactly. For example, if your Java class uses spaceId (camelCase) but your frontend sends spaceid (lowercase), Spring won't map the value unless you configure Jackson to ignore case. Add this to application.properties to fix that:

spring.jackson.mapper.accept-case-insensitive-properties=true

Confirm CORS Configuration (Just to Be Safe) #

Even though your browser shows the request was sent, incomplete CORS configuration can sometimes cause silent failures. Add @CrossOrigin to your controller class to allow requests from your frontend origin (replace http://localhost:3000 with your actual frontend port):

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/ideas")
public class IdeaController {
    // Your endpoints here
}

Start with fixing the Content-Type header and adding error logging—those are the most immediate fixes. Let me know if any of these steps help narrow down the issue!

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