axios傳送post請求java後端獲取不到資料原因及處理
場景/功能描述: 最近再學習前端的框架vue,發請求使用的是axios,自己簡單的寫了個後端,實現一個學生列表的crud,web層使用的是springmvc,並使用jq的$.ajax方式測試過介面沒問題。
出現的問題: 已經再次確保後端介面能接收jquery的$.ajax傳送的post請求,但前端使用vue,發請求通過axios來發送,後端卻無法獲取資料。
問題原因: 請求的Content-Type設定為application/x-www-form-urlencoded,那麼這個Post請求被認為是HTTP POST表單請求,引數出現在form data,引數形式是key=value&key1=value1這種形式,後端獲取使用@RequestParam; 其他情況如使用原生AJAX的POST請求如果不指定請求頭Request Header,預設使用的Content-Type是text/plain;charset=UTF-8,或者application/json ,引數出現在Request payload塊,其引數形式是標準的json格式,使用@RequestParam無法獲取,需要使用@RequestBody獲取。 在axios使用Post傳送資料時,預設是直接把json放到請求體中提交到後端的,屬於上述的第二種方式。 解決方案: 1.前端解決:新增請求頭資訊,並重新封裝請求引數 let params = 'studentno=' + this.student.studentno + '&name=' + this.student.name + '&phone=' + this.student.phone + '&email=' + this.student.email axios.post(url, params,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}) 2.後端解決:在請求引數使用@RequestBody註解替代@RequestParam @ResponseBody @RequestMapping(value="/save",method=RequestMethod.POST) public Map<String, String> save(@RequestBody Student student)//自動將引數封裝成student物件
程式碼不詳細列出,僅列出關鍵部分。