解決axios發(fā)送post請求返回400狀態(tài)碼的問題
更新時間：2018年08月11日 15:38:32 作者：transformer_WSZ
今天小編就為大家分享一篇解決axios發(fā)送post請求返回400狀態(tài)碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
今天在用 axios 發(fā)送一個跨域的post請求時，遇到了一個坑：Uncaught (in promise) Error: Request failed with status code 400。
前臺代碼如下：
axios({
method: "post",
url: "http://localhost:8080/employee/testpost",
data: {
username: '234234',
password: '4565'
}
}).then((res) => {
console.log(res.data);
})
后臺代碼如下：
@CrossOrigin
@PostMapping("/employee/testpost")
@ResponseBody
public Result testpost(@RequestParam(value = "username", required = true) String username,
@RequestParam(value = "password", required = true) String password) {
System.out.println(username + " , " + password);
Result json = new Result();
json.setResult(1);
return json;
}
而當我在postman上發(fā)送post請求時就能成功獲得返回數(shù)據(jù)。困擾了很久，才發(fā)現(xiàn)是請求頭的問題。axios請求頭的 Content-Type 默認是 application/json，而postman默認的是 application/x-www-form-urlencoded。我這里采取的解決辦法是改變后臺的接收方式：
@CrossOrigin
@PostMapping("/employee/testpost")
@ResponseBody
public Result testget(@RequestBody Map map) {
System.out.println(map.get("username") + " , " + map.get("password"));
Result json = new Result();
json.setResult(1);
return json;
}
這樣數(shù)據(jù)就成功返回了！
以上這篇解決axios發(fā)送post請求返回400狀態(tài)碼的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了在 Vue.js中優(yōu)雅地使用全局事件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue中this.$emit和this.$on的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue?ElementUI?table實現(xiàn)雙擊修改編輯某個內容的方法
在實現(xiàn)表格單元格雙擊編輯功能時,需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認編輯,同時,需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
這篇文章主要介紹了vue屬性props默認類型的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何在表格中實現(xiàn)右鍵菜單問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
在看這篇文章的幾點要求：需要你先知道Vue-Router是個什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章2022-09-09
這篇文章主要介紹了Vue Element-ui 鍵盤事件失效的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue.set()動態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法
今天小編就為大家分享一篇Vue.set()動態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了基于ant design日期控件使用_僅月份的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10