vue中post請求報400的解決方案

更新時間：2022年10月11日 11:42:15 作者：Double.楊

這篇文章主要介紹了vue中post請求報400的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue post請求報400

1、為默認(rèn)數(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 進(jìn)行網(wǎng)絡(luò)請求，使用起來和 jQuery 中的 $.get 和 $.post 功能類似。

安裝依賴：cnpm install --save axios

1. get 請求方式

給定服務(wù)器控制器代碼，可以接收 name 和 age 參數(shù)，設(shè)置到 Map 中并返回。

注意：控制器上有跨域注解。前后端分離都是跨域請求。且端口不能設(shè)置 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ù)，如果使用這種方式傳參必須要結(jié)合 querystring 使用。

<template>
    <div id="app">
        發(fā)起請求獲取到的結(jié)果：<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
            })) //處理的結(jié)果是 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è)務(wù)代碼：

@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 全局設(shè)置

如果使用上面的這種方式，需要在每個頁面中都導(dǎo)入 axios，更簡便的方式是全局綁定 axios。

修改 main.js

import { createApp } from 'vue'
import App from './App.vue'
//導(dǎo)入./router/index文件里面配置好的路由
import router from './router/index'
import axios from "axios"
import qstring from "querystring"
//全局Vue對象
const Vue=createApp(App);
// 設(shè)置axios、qstring全局
Vue.config.globalProperties.$axios=axios;
Vue.config.globalProperties.$qstring=qstring;
Vue.use(router).mount('#app');

頁面中的寫法：在任何頁面中都可以直接使用 this.$axios 和 this.$qstring 進(jìn)行設(shè)置。

<template>
    <div id="app">
        發(fā)起請求獲取到的結(jié)果：<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)絡(luò)請求時 URL 都使用的是完整的 URL，可以把公共 URL 提出來，提出后發(fā)起網(wǎng)絡(luò)請求時，URL 只寫路徑部分，省略協(xié)議、IP 和端口。

如果沒有請求代理，每次在瀏覽器開發(fā)者工具看見真實(shí)請求服務(wù)器地址，這樣話就把服務(wù)器暴露給客戶端了。使用代理后只能看見代理前請求，保護(hù)真實(shí)服務(wù)器地址。

在項(xiàng)目根路徑(不是src)下新建 vue.config.js：

這個配置文件操作完成后必須重啟

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave:false,
    //配置請求代理
    devServer: {
        proxy: {
            //當(dāng)請求Vue項(xiàng)目路徑都以/api開頭時，轉(zhuǎn)發(fā)給下面
            '/api': {
                //服務(wù)器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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: