解決axios會發(fā)送兩次請求,有個OPTIONS請求的問題
問題描述:
Vue的開發(fā)者都知道axios,很多都用axios來進行數據交互,axios的默認請求頭是Content-Type: application/json
使用這個請求頭會出現向服務器請求兩次的情況
為什么呢?
原因是:瀏覽器會首先使用 OPTIONS 方法發(fā)起一個預請求,判斷接口是否能夠正常通訊,如果不能就不會發(fā)送真正的請求過來,如果測試通訊正常,則開始真正的請求。
大概意思就是:
瀏覽器對后臺說:我可以請求你嗎? ( ̄ˇ ̄)
后臺說:闊以。( ̄▽ ̄)~*
結果是:發(fā)送原有的GET(POST)請求
后臺說:不闊以。(‵﹏′)
結果是:報錯
那么這樣每個請求都會發(fā)送兩次,無形加重了服務器的負擔(如果服務器特厲害就當我沒說),網上有的解決辦法是讓后臺允許options請求,但是并不返回任何數據,那么就不會報錯,可是這樣治標不治本,瀏覽器還是來撩后臺了,只是后臺不讓撩而已。
如何解決這個問題?不允許瀏覽器請求,只發(fā)送真正的請求,我也沒解決,如果有已經解決的朋友可以告訴我解決方法~( ̄3 ̄)~
但.......
我有可以替代的方法
那就是在main.js中,設置axios的默認請求頭axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
可是問題又來了
后臺不認這個數據格式啊...
所以在傳遞的時候必須先把數據轉換格式
這時候我們需要用到qs模塊
先 npm install qs
在main.js中
引入qs模塊
import qs from 'qs
然后弄qs原型
Vue.prototype.$qs = qs
這樣我們就可以在axios post請求的時候將我們傳遞的數據轉換成后臺認識的格式
this.$axios .post("http://xxx/", this.$qs.stringify(postData) ).then(data => { if (data.data.status != 200) { //xxx } else { //xxx } });
總結
以上所述是小編給大家介紹的解決axios會發(fā)送兩次請求,有個OPTIONS請求的問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
正則表達式刪除JavaScript代碼中的空格、注釋和換行符
這篇文章主要介紹了正則表達式刪除JavaScript代碼中的空格、注釋和換行符,需要的朋友可以參考下2023-12-12js模仿php中strtotime()與date()函數實現方法
這篇文章主要介紹了js模仿php中strtotime()與date()函數實現方法,涉及javascript時間操作的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08