Vue中使用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-Typeapplication/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-Typeapplication/json;chatset=UTF-8,不然會出現415錯誤,SpringMVC經過使用HandlerAdapter配置HTTPMessageConverter來解析HTTPEntity中的數據,而後綁定到Bean上。
  • 在POST請求使用@RequestBody時,前端必須使用JSON.stringify()格式化爲JSON字符串數據。
註解 支持類型 支持的請求類型 支持的Content-Type請求頭類型
@PathVariable URL GET ALL
@RequestParam URL GET ALL
@RequestParam Body ALL application/form-data, application/x-form-www-urlencoded
@RequestBody Body ALL aplication/json