向API发送POST请求遇406/400错误，请求协助排查问题

Let's walk through what's causing these errors and how to fix them, based on the details you shared:

First, let's unpack the error codes #

• 406 Not Acceptable: This usually means either the server can't return a response in the format your client's Accept header specifies, or more likely here—your request body isn't in a format the server expects, so it can't process the request. Without setting Content-Type, the server doesn't know how to parse your request payload, hence the 406.
• 400 Bad Request with "Unauthorized header content-type": When you added the Content-Type header, this error (especially in Chrome) points to either a mismatch between the header and your actual request body, or a CORS configuration issue on the server side.

Step-by-Step Fixes to Try #

1. Confirm the server's expected Content-Type #

First, check the API documentation or reach out to your backend team to find out exactly what Content-Type values the server accepts. Common options are:

• application/json (for JSON payloads)
• application/x-www-form-urlencoded (for form data)
• multipart/form-data (for file uploads)

Using the wrong value here will almost always trigger errors.

2. Match your request body to the Content-Type #

If the server expects application/json, make sure you're sending a JSON string, not a plain JavaScript object:

With Axios:

Axios usually handles this automatically, but if you're setting headers manually, double-check:

// Correct: Serialize the data to JSON if setting headers manually
axios.post('/your-api-endpoint', JSON.stringify(yourData), {
  headers: {
    'Content-Type': 'application/json'
  }
})

Or let Axios do the work for you (no manual header needed):

// Axios auto-serializes objects to JSON and sets the header
axios.post('/your-api-endpoint', yourData)

With Fetch:

Fetch doesn't auto-serialize, so you have to do it explicitly:

fetch('/your-api-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(yourData) // Critical: Convert object to JSON string
})

3. Fix CORS configuration (if cross-domain) #

The "Unauthorized header content-type" error in Chrome often happens when your frontend and API are on different domains. The server needs to explicitly allow the Content-Type header in its CORS settings.

Check the Network tab in Chrome DevTools: look for an OPTIONS preflight request. If that fails, the server is missing the Access-Control-Allow-Headers: Content-Type response header. Ask your backend team to add this to their CORS configuration.

4. Test the API with Postman (to isolate the issue) #

Rule out frontend-specific problems by sending the same request via Postman. If Postman works, the issue is in your frontend request setup. If Postman also throws errors, the problem is on the server side (e.g., misconfigured endpoint, missing validation rules).

5. Verify your request method and payload location #

Double-check that the API actually accepts POST requests (some endpoints might only allow GET or PUT). Also, make sure you're sending data in the request body, not as query parameters, unless the API expects it that way.

内容的提问来源于stack exchange，提问作者Dmitry S.