axios中POST請求變成OPTIONS處理

我是敏敏啦發表於2018-07-19
iOS

今天在調介面的時候，發現在axios Post的方式提交formData格式的資料的時候出現了請求變成opition的情況，導致無法請求成功。這把我給鬱悶的啊，因為我用jQuery的$.ajax可以請求成功，沒有任何問題，資料成功返回。於是我就去網上搜了一番，最後終於解決了！下面我來分析一下：

錯誤情況

控制檯請求方式變成了OPITIONS

axios中POST請求變成OPTIONS處理

可是我明明寫的是POST啊

axios中POST請求變成OPTIONS處理

這是為啥呢？具體原因可以參考淺談 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並配置

axios中POST請求變成OPTIONS處理

在上面這兩個地方按我的寫法引入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中POST請求變成OPTIONS處理

如果沒有封裝axios配置，可以引入後，直接

axios.post('url, qs.stringify(data)).then(
    res => {
        ...
    }
)複製程式碼

遇見的問題

是不是覺得這樣就大功告成了，不不不，因為我的請求是需要傳送一大堆中文給後臺，傳送成功後，發現後臺返回給我的值是一堆亂碼，不對啊！這不對啊！看看自己介面穿的引數明明是中文怎麼特麼的返回回來就變成亂碼了，這。。。我又去找了找問題，發現只只要在axios配置那裡加一行程式碼

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';複製程式碼

axios中POST請求變成OPTIONS處理

最後再請求介面試試，亂碼不見啦，搞定！

我個人建議使用qs的這個方法哈，因為使用起來比較方便， 每次append太麻煩啦～

下次說axios配置！哈哈?



相關文章