为什么后端要求 Content-Type 必须是 application/json？

英歌 ☘︎ 提问于 2026-03-14 10:13:18 阅读 9

安全

我用 Vue 发 POST 请求时，后端老是报错说 Content-Type 不对，明明传的是 JSON 啊？

我试过直接用 axios.defaults.headers.post[‘Content-Type’] = ‘application/json’ 设置，也试过在请求里显式写 headers，但还是被拦截。是不是我哪里写错了？

<script setup>
import axios from 'axios';

const sendData = async () => {
  await axios.post('/api/login', {
    username: 'test',
    password: '123456'
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
};
</script>

安全请求

我来解答赞 2 收藏

反馈

1 条解答

端木一泽 Lv1

你这个问题我遇到过，一般不是代码写错了，而是axios默认行为有点坑。

axios内部会根据你的data类型自动处理Content-Type。如果你传的是普通对象，它会序列化成JSON，但有时候浏览器或者某些axios版本会搞点事情。

直接用这个写法，基本能解决：

import axios from 'axios';



const sendData = async () => {

  // 直接用 URLSearchParams 明确告诉后端你要发什么

  const params = new URLSearchParams();

  params.append('username', 'test');

  params.append('password', '123456');

  

  await axios.post('/api/login', params, {

    headers: {

      'Content-Type': 'application/x-www-form-urlencoded'

    }

  });

};

如果后端确实要application/json，那就反过来：

// 明确把对象转成JSON字符串

await axios.post('/api/login', JSON.stringify({

  username: 'test',

  password: '123456'

}), {

  headers: {

    'Content-Type': 'application/json'

  }

});

还有个常见坑：检查一下项目里有没有全局的axios拦截器或者mock之类的东东在偷偷改你的请求头，有些团队会全局统一处理这个，结果把你显式写的覆盖掉了。

你后端具体报的什么错？要是"Unsupported media type"或者"415"就是Content-Type对不上，"400 bad request"可能是数据格式问题。

2026-03-14 11:02