Vue中使用axios調(diào)用后端接口的坑及解決
axios調(diào)用后端接口的坑
問(wèn)題場(chǎng)景
Vue.js工程中使用axios調(diào)用后端接口(SpringBoot構(gòu)建)出現(xiàn)后端接口無(wú)法獲得數(shù)據(jù)的情況
總結(jié)了如下場(chǎng)景
@RequestParam用來(lái)處理application/x-www-form-urlencoded編碼(HTTP協(xié)議請(qǐng)求頭中不指定Content-Type默認(rèn)就是application/x-www-form-urlencoded)。
@RequestParam可以接受簡(jiǎn)單類(lèi)型的屬性，也可以接受對(duì)象類(lèi)型的屬性，實(shí)質(zhì)就是將Request.getParameter()中的鍵值對(duì)Map利用Spring的轉(zhuǎn)化機(jī)制ConversionService配置，轉(zhuǎn)化成參數(shù)接受對(duì)象或者字段。
@RequestParam在GET請(qǐng)求中是QueryString的形式，POST請(qǐng)求BodyData的值都會(huì)被Servlet接受并轉(zhuǎn)化為Request.getParameter()參數(shù)集中。
@RequestParam在POST請(qǐng)求指定Content-Type為application/json;charset=UTF-8時(shí)會(huì)出現(xiàn)400錯(cuò)誤。
@RequestParam不能使用@RequestParam JSONObject params接受參數(shù)，否則會(huì)出現(xiàn)500錯(cuò)誤。
@RequestParam前端不能使用JSON.stringify()格式化參數(shù)，可以使用axios中的QS代替：QS.stringify()。
@RequestBody用來(lái)處理HTTPEntity(HTTP實(shí)體，HttpEntity實(shí)體即可以使流也可以使字符串形式)傳遞過(guò)來(lái)的數(shù)據(jù)，一般用于處理非application/x-www-form-urlencoded編碼。
GET請(qǐng)求沒(méi)有HTTPEntity所以@RequestBody并不適用，否則參數(shù)會(huì)亂碼導(dǎo)致400錯(cuò)誤。
在POST請(qǐng)求中使用@RequestBody時(shí)，通過(guò)HTTPEntity傳遞參數(shù)，必須要在HTTP請(qǐng)求頭設(shè)置Content-Type為application/json;chatset=UTF-8，否則會(huì)出現(xiàn)415錯(cuò)誤，SpringMVC通過(guò)使用HandlerAdapter配置HTTPMessageConverter來(lái)解析HTTPEntity中的數(shù)據(jù)，然后綁定到Bean上。
在POST請(qǐng)求使用@RequestBody時(shí)，前端必須使用JSON.stringify()格式化為JSON字符串?dāng)?shù)據(jù)。
| 注解 | 支持類(lèi)型 | 支持的請(qǐng)求類(lèi)型 | 支持的Content-Type請(qǐng)求頭類(lèi)型 |
|---|---|---|---|
| @PathVariable | URL | GET | ALL |
| @RequestParam | URL | GET | ALL |
| @RequestParam | Body | ALL | application/form-data, application/x-form-www-urlencoded |
| @RequestBody | Body | ALL | aplication/json |
調(diào)用后端接口 使用axios跨域問(wèn)題
找到項(xiàng)目中vue.config.js
修改 devserver
devserver /api/app 等于 /https://www.lifewhw.top/app,
devserver下 配置ip 端口沒(méi)問(wèn)題 換成域名訪問(wèn)接口時(shí)如出現(xiàn) Access-Control-Allow-Origin 跨域問(wèn)題
去后端 請(qǐng)求頭 設(shè)置 access-control-allow-origin: '*'
親測(cè)有效!
1.如果調(diào)用一次axios 發(fā)送了兩條get 請(qǐng)求 并且 其中一條狀態(tài)碼為301 說(shuō)明是重定向 瀏覽器幫你從新發(fā)送了請(qǐng)求(原因是你前端路由配置的和后端不同,我是因?yàn)樯倥渲昧?出現(xiàn)發(fā)送兩次get請(qǐng)求 其中一次為301)
2. 還有一沖情況就是 兩次請(qǐng)求 第一次的請(qǐng)求頭為options 這個(gè)原因自行百度一大推
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文主要介紹了Vue的基本應(yīng)用。具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
我們?cè)谇岸碎_(kāi)發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時(shí)候，里面有個(gè)彈窗el-dialog組件的時(shí)候會(huì)有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
vue組件中傳值EventBus的使用及注意事項(xiàng)說(shuō)明
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項(xiàng)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue+element加入簽名效果（移動(dòng)端可用）
這篇文章主要介紹了vue+element加入簽名效果（移動(dòng)端），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
函數(shù)式彈窗是一種使用函數(shù)來(lái)創(chuàng)建彈窗的技術(shù),它可以簡(jiǎn)化彈窗的使用,只需要在需要彈窗的地方調(diào)用函數(shù)就可以了,下面我們就來(lái)看看vue3中函數(shù)式彈窗的具體應(yīng)用吧2024-01-01
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
最近工作中有需要將一些前端頁(yè)面(如報(bào)表頁(yè)面等)導(dǎo)出為pdf的需求,下面這篇文章主要給大家介紹了關(guān)于vue3 如何將頁(yè)面生成 pdf 導(dǎo)出,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
在本篇文章里小編給大家整理的是關(guān)于Vue代碼整潔之去重的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-08-08
vue之保留小數(shù)點(diǎn)兩位小數(shù) 使用filters(過(guò)濾器)
這篇文章主要介紹了vue之保留小數(shù)點(diǎn)兩位小數(shù) 使用filters(過(guò)濾器),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11