国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于axios會發(fā)送兩次請求,有個OPTIONS請求的問題

weij / 3525人閱讀

當(dāng)時項目為了解決這個問題自閉了一個下午.....上網(wǎng)找了很多的文章看,幾乎都沒有根治方法,但是最后還是被我搞定了
[]~( ̄▽ ̄)~* 

問題描述:

Vue的開發(fā)者都知道axios,很多都用axios來進(jìn)行數(shù)據(jù)交互,axios的默認(rèn)請求頭是Content-Type: application/json
使用這個請求頭會出現(xiàn)向服務(wù)器請求兩次的情況
為什么呢?

原因是:瀏覽器會首先使用 OPTIONS 方法發(fā)起一個預(yù)請求,判斷接口是否能夠正常通訊,如果不能就不會發(fā)送真正的請求過來,如果測試通訊正常,則開始真正的請求。

大概意思就是:
瀏覽器對后臺說:我可以請求你嗎? ( ̄ˇ ̄) 
后臺說:闊以。( ̄▽ ̄)~*
結(jié)果是:發(fā)送原有的POST請求
后臺說:不闊以。(‵﹏′)
結(jié)果是:報錯

那么這樣每個請求都會發(fā)送兩次,無形加重了服務(wù)器的負(fù)擔(dān)(如果服務(wù)器特厲害就當(dāng)我沒說),網(wǎng)上有的解決辦法是讓后臺允許options請求,但是并不返回任何數(shù)據(jù),那么就不會報錯,可是這樣治標(biāo)不治本,瀏覽器還是來撩后臺了,只是后臺不讓撩而已。
如何解決這個問題?不允許瀏覽器請求,只發(fā)送真正的請求,我也沒解決,如果有已經(jīng)解決的朋友可以告訴我解決方法
~( ̄3 ̄)~

但是!

我有可以替代的方法
那就是在main.js中,設(shè)置axios的默認(rèn)請求頭axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";

可是問題又來了

后臺不認(rèn)這個數(shù)據(jù)格式啊...

所以在傳遞的時候必須先把數(shù)據(jù)轉(zhuǎn)換格式

這時候我們需要用到qs模塊
npm install qs

在main.js中

引入qs模塊

import qs from "qs

然后弄qs原型

Vue.prototype.$qs = qs

這樣我們就可以在axios post請求的時候?qū)⑽覀儌鬟f的數(shù)據(jù)轉(zhuǎn)換成后臺認(rèn)識的格式

this.$axios
     .post("http://xxx/", 
        this.$qs.stringify(postData)
      ).then(data => {
        if (data.data.status != 200) {
          //xxx
        } else {
          //xxx
        }
      });

這樣就完美解決問題,減少了對服務(wù)器的請求,減輕了對服務(wù)器的壓力,最重要的是可!以!傳!

如果有什么疑問歡迎留言,有錯誤或者有更簡單的方法歡迎大力指出

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/108267.html

相關(guān)文章

  • 在Vue中如何使用axios請求攔截

    摘要:很多初學(xué)者就會放棄使用攔截器,畢竟攔截器是可以不使用的,但是使用攔截器,會在頁面中減少很多不必要的代碼。三不使用請求攔截如果不使用請求攔截,也是可以的,但是會多了非常多的代碼,我們以登錄頁為例。 一、前言 axios的基礎(chǔ)使用就不過多的講解啦,如何使用可以看axios文檔使用說明·Axios中文說明 在這里和大家分享一下axios攔截在實際項目中的使用 很多人都看過axios的官方文...

    _Dreams 評論0 收藏0
  • axios攜帶cookie配置(axios+koa)

    摘要:通過將屬性設(shè)置為,可以指定某個請求應(yīng)該發(fā)送憑據(jù)。前臺跨域請求,由于規(guī)范的存在,瀏覽器會首先發(fā)送一次嗅探,同時帶上,判斷是否有跨域請求權(quán)限,服務(wù)器響應(yīng)的值,供瀏覽器與匹配,如果匹配則正式發(fā)送請求。 話不多說,一個字,干! 前端配置如下: axios.defaults.withCredentials = true; //配置為true axios.post(http:/...

    張巨偉 評論0 收藏0
  • 【Geek議題】合理VueSPA架構(gòu)討論(上)

    摘要:下面也是以模塊的模塊集為例,可以發(fā)現(xiàn)和路由有一些不同就是這里為了防止模塊跟全局耦合,運用函數(shù)式編程思想類似于依賴注入,將全局的實例作為函數(shù)參數(shù)傳入,再返回出一個包含的對象,這個導(dǎo)出的對象將會被以模塊名命名,合并到全局的集中。 前言 web前端發(fā)展到現(xiàn)代,已經(jīng)不再是嚴(yán)格意義上的后端MVC的V層,它越來越向類似客戶端開發(fā)的方向發(fā)展,已獨立擁有了自己的MVVM設(shè)計模型。前后端的分離也使前端人...

    worldligang 評論0 收藏0
  • 【Geek議題】合理VueSPA架構(gòu)討論(上)

    摘要:下面也是以模塊的模塊集為例,可以發(fā)現(xiàn)和路由有一些不同就是這里為了防止模塊跟全局耦合,運用函數(shù)式編程思想類似于依賴注入,將全局的實例作為函數(shù)參數(shù)傳入,再返回出一個包含的對象,這個導(dǎo)出的對象將會被以模塊名命名,合并到全局的集中。 前言 web前端發(fā)展到現(xiàn)代,已經(jīng)不再是嚴(yán)格意義上的后端MVC的V層,它越來越向類似客戶端開發(fā)的方向發(fā)展,已獨立擁有了自己的MVVM設(shè)計模型。前后端的分離也使前端人...

    pepperwang 評論0 收藏0
  • 使用vue2+Axios遇到一些坑

    摘要:結(jié)果是發(fā)送原有的請求后臺說不闊以。結(jié)果是報錯解決方法設(shè)置的默認(rèn)請求頭使用模塊可以不設(shè)置,模塊會自己設(shè)置。設(shè)置之后,后臺不認(rèn)這個數(shù)據(jù)格式,所以在傳遞的時候必須先把數(shù)據(jù)轉(zhuǎn)換格式在中,引入模塊需要時調(diào)用方法 1. 向服務(wù)器請求兩次的情況 (1)axios的默認(rèn)請求頭是Content-Type: application/json,使用這個請求頭會出現(xiàn)向服務(wù)器請求兩次的情況;(2)瀏覽器會首...

    lykops 評論0 收藏0

發(fā)表評論

0條評論

weij

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<