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

Question

我有一个 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);
                    });

Answer 1

axios post 第二个参数已经是你要传递的数据了。来自

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); });

这是因为signature 的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）和另一个从正文获取（例如在正文请求中发送的那个 - 请参阅docs了解有关 POST 正文的更多信息）。所以，也许在你的后端代码的某个地方你会有

$request->body('STATE_DD_INPUT')

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

$request->query('STATE_DD_INPUT')

Answer 2

是否要在标头中传递参数？

axios.post(window.location.origin + '/API/StateContacts', {
    headers: {
        'Content-Type': 'application/json',
        'STATE_DD_INPUT': stateDD
    }
})      
.then((response) => {
    console.log(response.data)
})
.catch((error) => {
    console.log(error);
})