前端HTTP 415错误排查：Content-Type设置与CORS预检详解

作者：资源驿站

时间：2026-10-31

本文深入分析前端开发中常见的HTTP 415 Unsupported Media Type错误。主要探讨因未正确设置请求头Content-Type导致的服务器拒绝，以及CORS环境下OPTIONS预检请求未包含Content-Type头引发的跨域问题。通过具体代码示例，展示如何修正Fetch API请求及配置服务器端响应头，帮助开发者快速定位并解决此类前后端交互异常。

文章目录

引言

在Web开发实践中，前后端数据交互时常会遭遇HTTP状态码415“Unsupported Media Type”（不支持的媒体类型）报错。该状态码明确指示服务器无法处理客户端发送的请求，核心原因在于请求体所声明的媒体类型（MIME type）不在服务器允许范围内。

问题解析

当客户端发起包含请求体的HTTP方法（如POST、PUT）时，通常需在请求头（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);
});