在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決
使用axios發(fā)送post請求出現(xiàn)400錯誤
出現(xiàn)400狀態(tài)碼主要有兩種原因
1.bad request：“錯誤的請求"
2.invalid hostname："不存在的域名”
我報的錯是第一種bad request
總結了錯誤的幾個原因
1.請求頭錯誤，前端請求頭的content-type和后端不一致
axios默認的請求頭的格式是：applecation/json，后端可能是application/x-www-form-urlencoded
解決：改請求頭
2.參數(shù)傳遞錯誤
前端提交的數(shù)據(jù)的字段名稱或者字段類型和后端的實體類不一致，導致無法封裝
解決：對照字段名稱、類型與后端需要的保持一致
3.前后端數(shù)據(jù)格式不一致
前端提交到后臺的數(shù)據(jù)應該是json字符串類型，而前端沒有將對象轉換成字符串類型
解決：使用JSON.stringify()將前端傳遞的對象轉換為字符串
我的問題：
后端說只需要傳data和name，結果我看接口文檔里不止data和name，他說只需要data和name我就只傳了data和name，結果果然需要把接口文檔里所有的數(shù)據(jù)都傳過去才行。
還有一點是后端需要data傳JSON字符串，所以需要把對象轉換為JSON字符串。
修改完之后就跑通啦。
vue axios400 Bad Request問題
這個是我要傳的對象
導出的方法
在組件中用到導出的方法，并傳參
后臺controller層的方法
報的400錯誤和后臺控制套臺的顯示
這里說下什么是400錯誤，400問題，最大幾率是出現(xiàn)了數(shù)據(jù)類型不一致的問題，這里我前端傳的是一個json套json，但是我后臺收的話，應該也是json套json。
我最大的錯誤就是沒有好好去了解axios的data和params，這里補充下：
axios中，params和data
因為params是添加到url的請求字符串中的，用于get請求。
而data是添加到請求體（body）中的， 用于post請求。
我在post里面用的params,后面改成data來傳就對勁了。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3中的任何一個組合式api都可以單獨抽離出去在另一個文件，最后只需要回歸到setup()中即可，這篇文章主要介紹了vue3的抽離封裝方法,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中的scope使用詳解,需要的朋友可以參考下2017-10-10
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。2020-03-03
vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty與Proxy區(qū)別
這篇文章主要為大家介紹了vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty Proxy源碼示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
iview table render集成switch開關的實例
下面小編就為大家分享一篇iview table render集成switch開關的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue是一個輕量級、漸進式的Javascript框架,如果想要要開發(fā)全新的Vue項目,建議項目構建工具vue-cli,下面這篇文章主要給大家介紹了關于VSCode創(chuàng)建Vue項目的完整步驟,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue使用自定義指令實現(xiàn)拖拽行為,結合實例形式分析了Vue使用自定義指令實現(xiàn)拖拽行為具體步驟、原理與操作注意事項,需要的朋友可以參考下2020-06-06
Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖書管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
vue.js項目 el-input 組件 監(jiān)聽回車鍵實現(xiàn)搜索功能示例
今天小編就為大家分享一篇vue.js項目 el-input 組件 監(jiān)聽回車鍵實現(xiàn)搜索功能示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08