记一次在js中使用axios设置ContentType无效

最新推荐文章于 2025-10-09 00:02:15 发布

原创最新推荐文章于 2025-10-09 00:02:15 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#axios #js #ajax #java

前端专栏收录该内容

8 篇文章

订阅专栏

本文讲述了在使用Axios发送POST请求时遇到ContentType设置失败的问题及解决过程。作者原本使用$.ajax失败，转而尝试Axios，但在设置ContentType时遭遇难题。通过查阅文档，作者发现全局设置Content-Type的方法，并误以为找到了解决方案。最终，发现问题是由于headers拼写错误导致。

菜就是菜，菜就是原罪

前言

为什么要在js中使用axios，直接使用jquery中的ajax不好吗？
事情是这样的，我用weui写一个页面，但是需要用到日期时间选择控件，我就找了一个，需要引入一个工具叫做zepto.weui.js。但是神奇的是，引入这个东西之后，我直接使用$.ajax失败，怎么都发送不了ajax。把它去掉之后就可以使用ajax了。
就在我想要放弃使用这个控件的时候，我突然发现项目中引入了axios。
这让我很惊喜，简直是柳暗花明又一村啊，我用它发个简单请求完全没有问题。

问题出现了

但是当我用它设置ContentType的时候，就一直设置不成功，我都要疯了，网上各种百度和谷歌，各种方式都试了试，都不行。我的内心直呼：网上都是骗人的。
这个问题困扰我了快一天时间了，后来我放弃百度和谷歌，直接去研究axios的文档。还真让我发现了不一样的地方：
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
这样可以设置一个全局默认的Content-Type，然后我就在请求之前先设置一下这个东西，我一下子就发送成功了，我觉得我发现了华点。我觉得我可以在网络上重拳出击，大声的说，网上的都是错误的！！！！！！
然而菜就是菜，我本想用这个案例详细的写一个博客，然而在某一个瞬间，突然发现是我的axios设置参数写错了。
我是这么写的，它是错的。

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  header: {
    'Content-Type': 'application/json'
  }
});

正确的应该是这么写的

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {
    'Content-Type': 'application/json'
  }
});

不知道各位发现了没有，我把headers写成了header，就因为这里少了个s我竟然始终看不出来。
就这么一个小小的问题居然困扰了我一整天，我真是醉了。我旁边的大哥也帮我看了半天，没发现我哪里错了，当我设置全局的默认值成功之后，我就立马跟他说设置一下全局的默认值就好了，后来发现原来是我headers写错了，我也没好意思跟他说，实在是太丢人了。