使用vue2+Axios遇到的一些坑

jrue發表於2019-02-16
VueiOS

1. 向伺服器請求兩次的情況

  • （1）axios的預設請求頭是Content-Type: application/json，使用這個請求頭會出現向伺服器請求兩次的情況；
    （2）瀏覽器會首先使用 OPTIONS 方法發起一個預請求，判斷介面是否能夠正常通訊，如果不能就不會傳送真正的請求過來，
    如果測試通訊正常，則開始真正的請求；

    瀏覽器對後臺說：我可以請求你嗎？ (￣ˇ￣)　
後臺說：闊以。(￣▽￣)~*
結果是：傳送原有的GET(POST)請求
後臺說：不闊以。(‵﹏′)
結果是：報錯

  • （3）解決方法：設定axios的預設請求頭axios.defaults.headers[`Content-Type`] = `application/x-www-form-urlencoded`（使用qs模組可以不設定，qs模組會自己設定。）；
    （4）設定之後，後臺不認這個資料格式，所以在傳遞的時候必須先把資料轉換格式；

    // step1. npm install qs
// step2. 在main.js中，引入qs模組
import qs from `qs`;
// 需要時呼叫qs.stringify()方法
this.$axios.post(`api/login`, qs.stringify({ 
    name: `xxx`, 
    password: `********` 
}).then(res => {
    
}).catch(err => {

});

相關文章