axios調(diào)用后端接口的坑

問題場景

Vue.js工程中使用axios調(diào)用后端接口(SpringBoot構(gòu)建)出現(xiàn)后端接口無法獲得數(shù)據(jù)的情況

總結(jié)了如下場景

@RequestParam用來處理application/x-www-form-urlencoded編碼(HTTP協(xié)議請求頭中不指定Content-Type默認(rèn)就是application/x-www-form-urlencoded)。

@RequestParam可以接受簡單類型的屬性，也可以接受對象類型的屬性，實質(zhì)就是將Request.getParameter()中的鍵值對Map利用Spring的轉(zhuǎn)化機制ConversionService配置，轉(zhuǎn)化成參數(shù)接受對象或者字段。

@RequestParam在GET請求中是QueryString的形式，POST請求BodyData的值都會被Servlet接受并轉(zhuǎn)化為Request.getParameter()參數(shù)集中。

@RequestParam在POST請求指定Content-Type為application/json;charset=UTF-8時會出現(xiàn)400錯誤。

@RequestParam不能使用@RequestParam JSONObject params接受參數(shù)，否則會出現(xiàn)500錯誤。

@RequestParam前端不能使用JSON.stringify()格式化參數(shù)，可以使用axios中的QS代替：QS.stringify()。

@RequestBody用來處理HTTPEntity(HTTP實體，HttpEntity實體即可以使流也可以使字符串形式)傳遞過來的數(shù)據(jù)，一般用于處理非application/x-www-form-urlencoded編碼。

GET請求沒有HTTPEntity所以@RequestBody并不適用，否則參數(shù)會亂碼導(dǎo)致400錯誤。

在POST請求中使用@RequestBody時，通過HTTPEntity傳遞參數(shù)，必須要在HTTP請求頭設(shè)置Content-Type為application/json;chatset=UTF-8，否則會出現(xiàn)415錯誤，SpringMVC通過使用HandlerAdapter配置HTTPMessageConverter來解析HTTPEntity中的數(shù)據(jù)，然后綁定到Bean上。

在POST請求使用@RequestBody時，前端必須使用JSON.stringify()格式化為JSON字符串?dāng)?shù)據(jù)。

調(diào)用后端接口 使用axios跨域問題

找到項目中vue.config.js

修改 devserver

devserver /api/app  等于 /https://www.lifewhw.top/app,

devserver下 配置ip 端口沒問題 換成域名訪問接口時如出現(xiàn) Access-Control-Allow-Origin   跨域問題

去后端 請求頭 設(shè)置 access-control-allow-origin: '*'

親測有效!

1.如果調(diào)用一次axios 發(fā)送了兩條get 請求 并且 其中一條狀態(tài)碼為301 說明是重定向 瀏覽器幫你從新發(fā)送了請求(原因是你前端路由配置的和后端不同,我是因為少配置了/出現(xiàn)發(fā)送兩次get請求 其中一次為301)

2. 還有一沖情況就是 兩次請求 第一次的請求頭為options 這個原因自行百度一大推 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論