最近学习了React，想拿React来重构之前做的一个Vue项目，在重构的过程中，便发现了一件奇怪的事情，百思不得其解。

axios POST 请求

首先我测试了登录接口，由于之前在实习的时候看到公司的前端接口代码都是封装好的，感觉这种封装的编码规范非常好，所以我便学习了一下怎么封装axios接口，并写了一个，代码如下所示：

import axios from 'axios'

function requestMethod({
  url,
  method,
  data = {},
  headers = {},
  transformRequest = []
}) {
  return new Promise((resolve, reject) => {
    axios({
      //在config配置文件下配置的生产环境和开发环境的路径
      baseURL: process.env.API_ROOT,
      url,
      method,
      data,
      headers,
      transformRequest
    }).then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    })
  })
}

export default requestMethod;

在组件中调用接口的代码如下：

const that = this;
let loginData = {
	username: that.loginForm.username,
	password: that.loginForm.password
};
requestMethod({
		url:'/login',
		method: 'post',
		data: loginData
	})
		.then(function (res) {
			if (res.data === '1') {
				//success...
			}
		}

然后便请求的时候便出现了如下错误：

错误的意思就是前后端传送数据的格式不一样，后端要求的是json格式的数据，即**‘Content-Type’:‘application/json;charset=UTF-8’，而前端的请求头是：‘Content-Type’:‘application/x-www-form-urlencoded’**

而此时我心中不禁疑惑，axios POST方法的默认请求头不是application/json;charset=UTF-8吗？怎么变成了application/x-www-form-urlencoded？

我带着疑惑在requestMethod接口中把请求头修改成了application/json;charset=UTF-8，如下：

headers = {'Content-Type':'application/json;charset=UTF-8'},

然后再请求一次，便出现了如下错误：

一般出现400错误都是前后端数据格式不一样，我看了一下控制台，发现我传给后端的数据竟然是js对象：

看到这个错误，我心中又生一疑惑，axios不是自动帮我们转json的吗？我还特意去看了一下axios文档，文档确实是这样子说明的。

此时此刻我直呼一句“好家伙”，没办法，我在requestMethod接口中使用JSON.stringify()方法手动把数据转为了json，如下：

//省略部分代码...
axios({
      //在config配置文件下配置的生产环境和开发环境的路径
      baseURL: process.env.API_ROOT,
      url,
      method,
      data: JSON.stringify(data),
      headers,
      transformRequest
    })
//省略部分代码...

经过上述两次修改后，请求成功了，在没使用上述封装之前，我的请求代码如下，请求一切顺利：

const that = this;
let loginData = {
	username: that.loginForm.username,
	password: that.loginForm.password
};

let axiosInstance = axios.create({
	//在config配置文件下配置的生产环境和开发环境的路径
	baseURL: process.env.API_ROOT
});
axiosInstance.post('/login', loginData)
.then(function (res) {
		if (res.data === '1') {
			//success
		}
	}

虽说经过一番波折后，解决了问题，但我心中的两个疑惑还存在，难不成自己封装axios后，axios一些默认的属性失效了？希望看到这篇博客的朋友们能指点一下。