本地Spring Boot微服务Axios调用报400错误求助

Hey there, let's dig into why you're hitting that 400 error when calling your local Spring Boot service from Axios, even though Postman works perfectly. This is a common issue, and the fix usually boils down to mismatches between what your frontend sends and what your backend expects.

First, Capture Detailed Error Information #

Your current code doesn’t include error handling, which is why you’re only seeing a generic "Uncaught (in promise)" error. Adding a try/catch block will let you see the exact error message your Spring Boot backend returns—this is the fastest way to pinpoint the issue.

Update your action code like this:

import axios from "axios";

export const addProjectTask = (project_task, history) => async dispatch => {
  try {
    await axios.post("http://localhost:8080/api/board", project_task);
    history.push("/");
  } catch (error) {
    // Log full error details from the backend
    console.error("Backend Error Response:", error.response.data);
    console.error("Request Data Sent:", project_task);
  }
};

When you run this, the console will show specifics like "Field 'summary' is required" or "Invalid date format"—direct clues from your Spring Boot validation rules.

Common Causes & Fixes #

1. Mismatched Request Payload #

Postman lets you manually craft a perfect request body, but your frontend’s project_task object might be missing required fields, using incorrect field names, or sending data types that don’t match your backend’s expectations.

• Compare with Postman: Open your browser’s DevTools (Network tab), find the failed POST request, and check the "Payload" tab. Compare this to the body you sent in Postman. Look for:
  • Missing fields (e.g., your backend expects a summary field, but project_task doesn’t include it)
  • Typo’d field names (e.g., projectName vs project_name)
  • Incorrect data types (e.g., sending a string for a numeric priority field)
• Fix: Adjust your frontend form or state to ensure project_task matches the structure and validation rules of your Spring Boot entity/DTO.

2. Missing or Incorrect Request Headers #

While Axios defaults to sending Content-Type: application/json, there might be other headers your backend expects (like an Authorization token for authenticated endpoints) that Postman includes but your Axios request doesn’t.

• Check Headers in DevTools: In the Network tab, look at the "Headers" section of the failed request. Compare these to the headers you used in Postman.
• Fix: Add any missing headers to your Axios request. For example, if your backend requires an auth token:

  await axios.post("http://localhost:8080/api/board", project_task, {
    headers: {
      Authorization: `Bearer ${yourAuthToken}`
    }
  });
  

3. Spring Boot Validation Failures #

If your Spring Boot entity uses validation annotations like @NotBlank, @NotNull, or @Pattern, any violation will trigger a 400 error. Postman might have passed these checks, but your frontend’s data doesn’t.

• Example Backend Entity:

  public class ProjectTask {
      @NotBlank(message = "Summary cannot be empty")
      private String summary;
      
      @Min(value = 1, message = "Priority must be at least 1")
      private Integer priority;
      // Getters and setters
  }
  

• Fix: Ensure your frontend sends valid data for all annotated fields (e.g., summary isn’t empty, priority is a number ≥1).

Final Checks #

• Verify there are no global Axios interceptors modifying your request data or headers without your knowledge.
• Double-check that your frontend’s project_task object isn’t including extra fields that your backend doesn’t accept (most Spring Boot setups ignore unknown fields, but this can occasionally cause issues).

Once you capture the backend’s error message, fixing the issue should be straightforward. Feel free to share the error details if you need help interpreting them!

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