vue中post請求報400的解決方案
更新時間：2022年10月11日 11:42:15 作者：Double.楊
這篇文章主要介紹了vue中post請求報400的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue post請求報400
1、為默認數(shù)據(jù)格式為json,發(fā)請求時參數(shù)報錯
通過以下方式修改數(shù)據(jù)格式即可
import qs from 'qs';
// import qs from 'querystring'
const data = { 'bar': 123 };
const options = {
? method: 'POST',
? headers: { 'content-type': 'application/x-www-form-urlencoded' },
? data: qs.stringify(data),
? url,
};
axios(options);2、檢查發(fā)送的數(shù)據(jù)格式是否與后端要求相匹配，要求字符串，發(fā)送了數(shù)組也可能會出現(xiàn)400錯誤
vue 異步請求問題
Vue 中使用 axios 進行網(wǎng)絡請求，使用起來和 jQuery 中的 $.get 和 $.post 功能類似。
安裝依賴：cnpm install --save axios
1. get 請求方式
給定服務器控制器代碼，可以接收 name 和 age 參數(shù)，設置到 Map 中并返回。
注意：控制器上有跨域注解。前后端分離都是跨域請求。且端口不能設置 8080 端口，避免端口沖突。
<template>
<div id="app">
<div>用戶名：{{stu.name}}</div>
<div>年齡：{{stu.age}}</div>
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'App',
data(){
return{
stu:{
"name":null,
"age":null,
}
}
},
mounted(){
//頁面加載事件
axios.get("http://localhost:8181/index?name=zhangsan&age=18")
.then(res => {
console.log(res.data);
this.stu = res.data;
})
.catch(error => {
console.log(error);
})
}
}
</script>2. post 請求方式
POST 也支持 URL 重寫方式傳參，即通過 ? 和 & 傳遞參數(shù)，如果使用這種方式傳參必須要結合 querystring 使用。
<template>
<div id="app">
發(fā)起請求獲取到的結果：<span>{{name}},{{age}}</span>
</div>
<router-view/>
</template>
<script>
import axios from "axios"
import qstring from "querystring"
export default {
name: 'App',
data(){
return{
name:null,
age: null,
}
},
mounted(){
// 頁面加載事件
axios.post("http://localhost:8181/index", qstring.stringify({
name : "張三",
age: 23
})) //處理的結果是 name=張三&age=23
.then(res => {
console.log(res.data);
this.name = res.data.name;
this.age = res.data.age;
})
.catch(error => {
console.log(error);
})
}
}
</script>后端的業(yè)務代碼：
@RestController
@CrossOrigin //跨域注解
public class TestController {
@RequestMapping("/index")
public Map<String, Object> index(@Param("name") String name,@Param("age") Integer age){
Map<String, Object> result = new HashMap<>();
result.put("name", name);
result.put("age", age);
return result;
}
}
3. axios 全局設置
如果使用上面的這種方式，需要在每個頁面中都導入 axios，更簡便的方式是全局綁定 axios。
修改 main.js
import { createApp } from 'vue'
import App from './App.vue'
//導入./router/index文件里面配置好的路由
import router from './router/index'
import axios from "axios"
import qstring from "querystring"
//全局Vue對象
const Vue=createApp(App);
// 設置axios、qstring全局
Vue.config.globalProperties.$axios=axios;
Vue.config.globalProperties.$qstring=qstring;
Vue.use(router).mount('#app');
頁面中的寫法：在任何頁面中都可以直接使用 this.$axios 和 this.$qstring 進行設置。
<template>
<div id="app">
發(fā)起請求獲取到的結果：<span>{{name}},{{age}}</span>
</div>
<router-view/>
</template>
<script>
export default {
name: 'App',
data(){
return{
name:null,
age: null,
}
},
mounted(){
// 頁面加載事件
this.$axios.post("/api/index", this.$qstring.stringify({
name: "張三",
age: 15
}))
.then(res => {
console.log(res.data);
this.name = res.data.name;
this.age = res.data.age;
})
.catch(error => {
console.log(error);
})
}
}
</script>
4. 請求代理
在 Vue 中發(fā)起網(wǎng)絡請求時 URL 都使用的是完整的 URL，可以把公共 URL 提出來，提出后發(fā)起網(wǎng)絡請求時，URL 只寫路徑部分，省略協(xié)議、IP 和端口。
如果沒有請求代理，每次在瀏覽器開發(fā)者工具看見真實請求服務器地址，這樣話就把服務器暴露給客戶端了。使用代理后只能看見代理前請求，保護真實服務器地址。
在項目根路徑(不是src)下新建 vue.config.js：
這個配置文件操作完成后必須重啟
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
//配置請求代理
devServer: {
proxy: {
//當請求Vue項目路徑都以/api開頭時，轉(zhuǎn)發(fā)給下面
'/api': {
//服務器URL
target: "http://localhost:8181/",
ws: true,
pathRewrite: {
//把路徑中的api去掉
'^/api': ''
},
changeOrigin: true
}
}
}
});發(fā)起請求時可以使用 /api/xxx 的形式：
mounted(){
// //頁面加載事件
axios.get("/api/index?name=zhangsan&age=18")
.then(res => {
console.log(res.data);
this.name = res.data.name;
this.age = res.data.age;
})
.catch(error => {
console.log(error);
})
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue組件傳值過程中丟失數(shù)據(jù)的分析與解決方案
這篇文章主要給大家介紹了關于Vue組件傳值過程中丟失數(shù)據(jù)的分析與解決方案，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了vue3中安裝使用vue-i18n實時切換語言不用刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue多次循環(huán)操作,結合實例形式分析了vue.js針對json嵌套數(shù)據(jù)的多次循環(huán)讀取操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了Vue3?入口文件createApp函數(shù),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue項目中axios請求網(wǎng)絡接口封裝的示例代碼
這篇文章主要介紹了vue項目中axios請求網(wǎng)絡接口封裝的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue3不支持Filters過濾器的問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
今天小編就為大家分享一篇vue 點擊按鈕增加一行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹的是如何用Vue做一個簡單的隨機點名冊，主要是做個簡單的點名器，不做樣式,需要的朋友可以參考一下，希望對你有所幫助2021-12-12