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)單類型的屬性，也可以接受對(duì)象類型的屬性，實(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ù)。

調(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è)參考，也希望大家多多支持腳本之家。