React项目中使用Axios提交评论时触发400错误（ERR_BAD_REQUEST）的问题排查求助

Hey there, let's break down why you're hitting that AxiosError: Request failed with status code 400 error when submitting your comment form. Here are the key issues to fix and checks to run:

1. You’re unnecessarily stringifying the request payload #

Axios automatically serializes JavaScript objects to JSON when you pass them as the second argument to axios.post(). By wrapping your comment state in JSON.stringify(), you’re sending a raw string instead of a properly formatted JSON object. Most APIs expect JSON payloads, so this mismatch will cause the server to reject the request with a 400 error.

Fix: Remove JSON.stringify() when calling your API:

const data = await CommentsAPI.create(comment)

2. Missing await on your API call #

Your handleSubmit function is marked as async, but you’re not using await when calling CommentsAPI.create(). This means your code won’t wait for the promise to resolve or reject, so any errors from the API won’t be caught by your catch block (they’ll show up as unhandled promise rejections in the console instead).

Fix: Add await before the API call to ensure proper error handling:

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const data = await CommentsAPI.create(comment) // Add await here
    console.log(data)
  } catch (error) {
    console.log(error)
  }
}

3. Verify your payload matches the server’s expected schema #

A 400 error often means the server is rejecting the request because the payload is missing required fields or uses incorrect field names. Do these checks:

• Double-check that your server expects fields named pseudo and content (match exactly what the server’s schema defines)
• Add a console.log(comment) right before the API call to confirm both fields are populated in your state:

  const handleSubmit = async (event) => {
    event.preventDefault();
    console.log('Submitting payload:', comment); // Check state values
    try {
      const data = await CommentsAPI.create(comment)
      console.log(data)
    } catch (error) {
      console.log(error)
    }
  }
  

4. Confirm request headers (if needed) #

Axios sets the Content-Type: application/json header by default when sending objects, but if your server expects a different header or this was accidentally overridden, it could cause issues. You can explicitly set headers in your API service if necessary:

function create(comment) {
  return axios.post(URL_COMMENTS, comment, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

This is usually not required, but it’s a good check if the above fixes don’t resolve the error.

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