分析前端请求中的“Unsupported Media Type”问题

引言

        在进行Web开发的过程中，尤其是前后端交互时，前端开发者经常会遇到HTTP状态码为415 “Unsupported Media Type”的错误。该错误表明服务器无法处理客户端发送的请求，因为请求体的媒体类型（MIME type）不受支持。

问题解析

        当客户端发起POST、PUT等包含请求体的HTTP请求时，通常会在请求头（Request Headers）中指定Content-Type字段来说明请求体的数据格式。如果服务器端只接受特定类型的请求体，而客户端发送的Content-Type与其不符，则服务器会返回415错误。

        例如，假设服务器期望接收JSON格式数据（Content-Type: application/json），而客户端却以XML或其他格式提交，就可能出现此错误。

示例1：未正确设置Content-Type

// 错误示例：尝试以JSON格式发送数据，但没有设置正确的Content-Type
fetch('/api/endpoint', {
  method: 'POST',
  body: JSON.stringify({ key: 'value' })
});

        在此示例中，虽然请求体内容是JSON格式，但是没有明确指定Content-Type，服务器可能无法识别并因此返回415错误。

修复示例1：

// 修复：确保设置正确的Content-Type
fetch('/api/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

示例2：跨域请求中预检OPTIONS失败

        在CORS（跨源资源共享）环境下，对于非简单请求（如带自定义头部或非GET/HEAD方法的请求），浏览器会自动先发送一个OPTIONS预检请求。如果服务器对OPTIONS请求响应的"Access-Control-Allow-Headers"中没有列出"Content-Type"，也会导致实际请求报415错误。

修复示例2：

        确保服务器端配置正确允许"Content-Type"头，并在响应OPTIONS请求时包含：

// 服务器端伪代码示例（如Node.js Express框架）
app.options('/api/endpoint', function(req, res) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.send(204);
});

结论与建议

1. 检查请求头：始终确保发送请求时正确设置了Content-Type，与服务器端所期望的一致。
2. 服务器端配置：若存在跨域问题，务必在服务器端配置中允许必要的Content-Type和其他请求头。