时间戳

首页 > 解决方案 > VueJS + Axios Post请求未传递参数值

javascript - VueJS + Axios Post请求未传递参数值

问题描述

我有一个 API 可以更新数据库中的数据，然后返回一个查询。该 API 采用单个参数，并且在通过浏览器手动测试以及使用 axios get 请求进行测试时可以正常工作。但是出于安全目的，我想尝试坚持使用 POST 请求并对其进行测试，但是如果我尝试通过 POST（将 axios.get 更改为 axios.post）请求运行它，则参数值不会传递给 API . 下面是我的 axios 请求。可能是什么问题？

                axios.post(window.location.origin + '/API/StateContacts', {
                    params: {
                        STATE_DD_INPUT: stateDD
                    }
                })
                    .then(response => {
                        this.stateContactsArray = response.data;
                    }).catch(error => {
                        console.log(error.response.data.error);
                    });

标签： javascriptvue.jsasp.net-coreasp.net-web-apiaxios

解决方案

axiospost第二个参数已经是你要传递的数据了。从

axios.post(window.location.origin + '/API/StateContacts', {
                    params: {
                        STATE_DD_INPUT: stateDD
                    }
                })

到

axios.post(window.location.origin + '/API/StateContacts', {
                        STATE_DD_INPUT: stateDD
                    })

应该解决你的问题

编辑

你评论说：

但是，如果我这样做并添加一个{}它可以工作，但不知道为什么。

axios.post(window.location.origin + '/API/StateContacts', {}, { params: { STATE_DD_INPUT: stateDD } }) .then(response => { this.stateContactsArray = response.data; }).catch(error => { console.log(error.response.data.error); });

这是因为函数的签名是axios.post：

axios.post(url[, data[, config]])

而不是传递data第二个参数，而是传递第三个参数，即config. 该config对象具有parameters将向您的请求添加以下查询参数的键：

http://localhost/API/StateContacts?STATE_DD_INPUT=xxx

查询字符串的位置STATE_DD_INPUT。

由于我们不知道您的后端，我们假设您正在使用一种方法从请求中获取查询字符串，而不是请求的正文。框架之类Laravel的会查看查询字符串和搜索内容的正文。例如

$request->get('STATE_DD_INPUT')

您可能正在使用具有两种不同方法的框架。一个获取查询参数（例如从 URL - https://localhost/API/StateContacts?STATE_DD_INPUT=xxxx）和另一个从正文获取（例如在正文请求中发送的那个 - 请查阅此文档以了解更多关于 POST 正文）。所以，也许在你的后端代码的某个地方你会有

$request->body('STATE_DD_INPUT')

为了能够从查询字符串中获取请求，您应该有一些方法来做到这一点。例如

$request->query('STATE_DD_INPUT')

推荐阅读