今天在調接口的時候，發現在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配置！哈哈?

總結

以上是生活随笔為你收集整理的axios中POST请求变成OPTIONS处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。