成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于axios會(huì)發(fā)送兩次請(qǐng)求，有個(gè)OPTIONS請(qǐng)求的問(wèn)題

weij / 3540人閱讀

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

問(wèn)題描述：

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

原因是：瀏覽器會(huì)首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)請(qǐng)求，判斷接口是否能夠正常通訊，如果不能就不會(huì)發(fā)送真正的請(qǐng)求過(guò)來(lái)，如果測(cè)試通訊正常，則開始真正的請(qǐng)求。

大概意思就是：
瀏覽器對(duì)后臺(tái)說(shuō)：我可以請(qǐng)求你嗎？ (￣ˇ￣)　
后臺(tái)說(shuō)：闊以。(￣▽￣)~*
結(jié)果是：發(fā)送原有的POST請(qǐng)求
后臺(tái)說(shuō)：不闊以。(‵﹏′)
結(jié)果是：報(bào)錯(cuò)

那么這樣每個(gè)請(qǐng)求都會(huì)發(fā)送兩次，無(wú)形加重了服務(wù)器的負(fù)擔(dān)（如果服務(wù)器特厲害就當(dāng)我沒(méi)說(shuō)），網(wǎng)上有的解決辦法是讓后臺(tái)允許options請(qǐng)求，但是并不返回任何數(shù)據(jù)，那么就不會(huì)報(bào)錯(cuò)，可是這樣治標(biāo)不治本，瀏覽器還是來(lái)撩后臺(tái)了，只是后臺(tái)不讓撩而已。
如何解決這個(gè)問(wèn)題？不允許瀏覽器請(qǐng)求，只發(fā)送真正的請(qǐng)求，我也沒(méi)解決，如果有已經(jīng)解決的朋友可以告訴我解決方法
~(￣3￣)~

但是！

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

可是問(wèn)題又來(lái)了

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

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

這時(shí)候我們需要用到qs模塊
先 npm install qs

在main.js中

引入qs模塊

import qs from "qs

然后弄qs原型

Vue.prototype.$qs = qs

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

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

這樣就完美解決問(wèn)題，減少了對(duì)服務(wù)器的請(qǐng)求，減輕了對(duì)服務(wù)器的壓力，最重要的是可！以！傳！

如果有什么疑問(wèn)歡迎留言，有錯(cuò)誤或者有更簡(jiǎn)單的方法歡迎大力指出

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108267.html

相關(guān)文章

  • 在Vue中如何使用axios請(qǐng)求攔截

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

    _Dreams 評(píng)論0 收藏0

  • axios攜帶cookie配置（axios+koa）

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

    張巨偉 評(píng)論0 收藏0

  • 【Geek議題】合理的VueSPA架構(gòu)討論（上）

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

    worldligang 評(píng)論0 收藏0

  • 【Geek議題】合理的VueSPA架構(gòu)討論（上）

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

    pepperwang 評(píng)論0 收藏0

  • 使用vue2+Axios遇到的一些坑

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

    lykops 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

weij

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<