axios中POST请求变成OPTIONS处理

今天在调接口的时候，发如今axios Post的方式提交formData格式的数据的时候出现了请求变成opition的状况，致使没法请求成功。这把我给郁闷的啊，由于我用jQuery的$.ajax能够请求成功，没有任何问题，数据成功返回。因而我就去网上搜了一番，最后终于解决了！下面我来分析一下：

错误状况

控制台请求方式变成了OPITIONS

但是我明明写的是POST啊

这是为啥呢？具体缘由能够参考浅谈 AJAX 跨域请求时的 OPTIONS 方法 ，我以为说的很详细，下面，我来讲下个人解决方法吧😄

解决方法

1. 使用 URLSearchParams （会有兼容问题，写起来比较麻烦）

var data = new URLSearchParams();
data.append('id', '1');
data.append('name', 'minmin');
data.append('age', '23')
...

postData(data).then(    res => {
        ...
    }
)复制代码

这里的postData是我直接写好的方法，若是是没有封装过的axios 就直接按原始的写法传参就好啦

axios.post('url, data).then( res => { ... } ) 复制代码

2.使用qs.stringify

1.安装

npm install --save axios vue-axios qs

安装不上的用淘宝镜像，而后

cnpm install --save axios vue-axios qs复制代码

2.axios配置 

我把axios配置写在src/utils/request.js里面，在我当前这个request.js里引入qs并配置

在上面这两个地方按个人写法引入qs，而且在axios.interceptors.request.use请求前判断若是是post请求就将data qs.stringify

import qs from 'qs'
复制代码

axios.interceptors.request.use((config) => {
  if(config.method  === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
  return Promise.reject(error);
});
复制代码

这样就ok拉，就不用担忧请求方式那里是opitions了,打开控制台看一下，太棒了，奖励一朵小发发

若是没有封装axios配置，能够引入后，直接

axios.post('url, qs.stringify(data)).then( res => { ... } )复制代码

碰见的问题

是否是以为这样就大功告成了，不不不，由于个人请求是须要发送一大堆中文给后台，发送成功后，发现后台返回给个人值是一堆乱码，不对啊！这不对啊！看看本身接口穿的参数明明是中文怎么特么的返回回来就变成乱码了，这。。。我又去找了找问题，发现只只要在axios配置那里加一行代码

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';复制代码

最后再请求接口试试，乱码不见啦，搞定！

我我的建议使用qs的这个方法哈，由于使用起来比较方便， 每次append太麻烦啦～

下次说axios配置！哈哈😄