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)題 換成域名訪(fǎng)問(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.js（讀音 /vjuː/, 類(lèi)似于 view） 是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。本文給大家詳細(xì)介紹了vue解決跨域路由沖突問(wèn)題思路解析，需要的朋友參考下吧2017-11-11
vue 動(dòng)態(tài)樣式綁定 class/style的寫(xiě)法小結(jié)
這篇文章主要介紹了vue 動(dòng)態(tài)樣式綁定 class/style的寫(xiě)法小結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,也是vue的最突出的優(yōu)勢(shì),其實(shí) v-model 實(shí)際上是一個(gè)語(yǔ)法糖,本文將給大家介紹一下vue中v-model的實(shí)現(xiàn)原理,文中有相關(guān)的代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12
vue實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)小案例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue router傳遞參數(shù)并解決刷新頁(yè)面參數(shù)丟失問(wèn)題
這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁(yè)面參數(shù)丟失問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
基于axios封裝fetch方法及調(diào)用實(shí)例
下面小編就為大家分享一篇基于axios封裝fetch方法及調(diào)用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問(wèn)題
這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0中使用Element-Plus中Select下的filter-method屬性的相關(guān)資料,Filter-method用法是指從一組數(shù)據(jù)中選擇滿(mǎn)足條件的項(xiàng),文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
關(guān)于element-ui resetFields重置方法無(wú)效問(wèn)題及解決
這篇文章主要介紹了關(guān)于element-ui resetFields重置方法無(wú)效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3-pinia-ts項(xiàng)目中的使用示例詳解
這篇文章主要介紹了vue3-pinia-ts項(xiàng)目中的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08