React中使用Axios发送Post请求出现415 Unsupported Media Type错误

问题原因 #

你的Axios实例全局配置了Content-Type: application/json，但提交包含图片的FormData时，服务器需要的是multipart/form-data类型的请求头。手动设置json类型会导致服务器无法解析表单数据，从而返回415错误。Postman能正常请求是因为它会自动为FormData请求设置正确的Content-Type（包括自动生成的boundary）。

解决方案 #

方案一：修改全局Axios实例（推荐） #

移除全局的Content-Type设置，让Axios自动根据请求数据类型匹配对应的请求头：

const axiosInstance = axios.create({
    baseURL: baseURL,
    timeout: 5000,
    headers: {
        Authorization: localStorage.getItem('access_token')
            ? 'JWT ' + localStorage.getItem('access_token')
            : null,
        accept: 'application/json',
        // 移除 'Content-Type': 'application/json' 这一行
    }, 
});

方案二：单独为FormData请求设置请求头 #

如果需要保留全局的Content-Type配置，在提交FormData时覆盖headers：

axiosInstance.post(`admin/create/`, formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
});

注意：Axios会自动为FormData生成包含boundary的Content-Type，手动设置可能丢失boundary，导致服务器解析失败，因此优先推荐方案一。

额外优化建议 #

1. 确保请求完成后再跳转：当前代码中navigate和reload会在请求发送后立即执行，可能导致请求中断，应放在请求成功的回调里：

axiosInstance.post(`admin/create/`, formData)
    .then(() => {
        navigate('/admin/');
        window.location.reload();
    })
    .catch(error => {
        console.error('提交失败:', error);
    });

2. 避免空图片提交报错：提交前判断是否选择了图片，防止postimage为null时出现错误：

if (postimage?.image?.[0]) {
    formData.append('image', postimage.image[0]);
}

3. 优化handleChange逻辑：使用严格相等判断，代码更严谨：

if (e.target.name === 'image') {
    // ...
}
if (e.target.name === 'title') {
    // ...
}

内容的提问来源于stack exchange，提问作者User G Amsterdam