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太麻烦啦～