Vue中使用axios調用后端接口的坑怎么解決

這篇文章主要講解了“Vue中使用axios調用后端接口的坑怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue中使用axios調用后端接口的坑怎么解決”吧！

axios調用后端接口的坑

問題場景

Vue.js工程中使用axios調用后端接口(SpringBoot構建)出現后端接口無法獲得數據的情況

總結了如下場景

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

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

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

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

@RequestParam不能使用@RequestParam JSONObject params接受參數，否則會出現500錯誤。

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

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

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

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

在POST請求使用@RequestBody時，前端必須使用JSON.stringify()格式化為JSON字符串數據。

調用后端接口 使用axios跨域問題

首先找到項目中vue.config.js

修改 devserver

devserver /api/app

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

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

親測有效!

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

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

感謝各位的閱讀，以上就是“Vue中使用axios調用后端接口的坑怎么解決”的內容了，經過本文的學習后，相信大家對Vue中使用axios調用后端接口的坑怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！