1. 程式人生 > >axios傳送post請求java後端獲取不到資料原因及處理

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物件

程式碼不詳細列出,僅列出關鍵部分。