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配置！哈哈😄