React调用POST接口出现415 Unsupported Media Type错误求助

以下是针对问题的排查和解决步骤：

1. 对比Swagger与fetch的请求差异 #

打开浏览器开发者工具的Network面板，分别查看Swagger和fetch请求的核心内容：

• 请求头：确认Content-Type是否确实被设置为application/json，同时检查是否存在Swagger包含但fetch缺失的关键请求头（比如授权头Authorization）
• 请求体：对比两者的JSON结构、字段类型是否完全一致，比如Swagger中的数字字段，你的payload是否被错误序列化为字符串

2. 验证payload序列化正确性 #

JSON.stringify可能会因为payload中的特殊值（如undefined、循环引用）生成不符合接口要求的JSON。先打印序列化结果对比：

const serializedPayload = JSON.stringify(payload);
console.log('Serialized payload:', serializedPayload);

将结果与Swagger的请求体示例对照，修正payload结构中存在的问题。

3. 处理跨域预检请求（跨域场景下） #

若前端与后端不在同一域名，浏览器会先发送OPTIONS预检请求。需确保服务器正确响应该请求，且返回的Access-Control-Allow-Headers包含Content-Type。

可在fetch配置中显式声明跨域模式：

fetch(url, {
    method: 'POST',
    mode: 'cors',
    body: JSON.stringify(payload),
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        // 若Swagger使用了授权头，此处需同步添加，示例：
        // 'Authorization': 'Bearer ' + yourAuthToken
    },
})
.then(response => {
    // 不要仅打印response，需查看具体返回内容定位问题
    if (!response.ok) {
        return response.text().then(text => { throw new Error(text) });
    }
    return response.json();
})
.then(data => console.log('Response data:', data))
.catch(error => console.error('Error:', error))

4. 用原始JSON字符串直接测试 #

跳过JSON.stringify，直接使用Swagger中的请求体示例作为请求体，排除序列化环节的问题：

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    },
    body: '{"yourField":"yourValue","anotherField":123}' // 替换为Swagger的请求体示例
})
// 后续处理同上

5. 调整Content-Type格式 #

部分服务器框架对请求头的格式有严格要求，尝试将Content-Type设置为application/json;charset=UTF-8（注意UTF-8的大写格式）再测试。

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