带有 vue.js 的 axios 中的 PUT 请求问题答案

【问题标题】：Problem with PUT request in axios with vue.js带有 vue.js 的 axios 中的 PUT 请求问题
【发布时间】：2019-11-20 09:38:01
【问题描述】：

我正在构建一个智能家居应用程序。我在将 PUT 请求发送到我的 rest api 时遇到问题（我用烧瓶构建它），但是当我尝试发送请求时，它给了我 HTTP 400 错误（（未捕获（承诺中）错误：请求失败，状态码为 400））。你能帮帮我吗？

import axios from 'axios';
export default {
    data: function() {
        return {
            value: 0,
            lampName: 'Kitchen',
        };
    },
    mounted () {
        axios
        .get("http://127.0.0.1:5000/lamp/" + this.$route.params.id)
        .then(response => (this.value = response.data))
    },
    methods: {
        updateValue () {
            axios
                .put('http://127.0.0.1:5000/lamp/' + this.$route.params.id,
                {value: this.value},
                {headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            })
        }
    }
}

【问题讨论】：

试试 .catch(error => console.log(error))
感谢您的回答，但它仍然不起作用，并且不会在控制台中打印更多信息。

标签： vue.js axios

【解决方案1】：

所以这是失败的请求：

axios
    .put('http://127.0.0.1:5000/lamp/' + this.$route.params.id,
    {value: this.value},
    {headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
})

我不知道您的服务器期望什么，但您在发送 JSON 数据时设置了 content-type 或 application/x-www-form-urlencoded。这种不匹配似乎是您的问题的原因。如果您在浏览器开发者工具的网络部分检查请求，您应该能够看到这一点。

如果您需要使用application/x-www-form-urlencoded，那么我建议您阅读 axios 文档，因为您不能只传递这样的数据对象：

https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

简而言之，您需要手动构建正文字符串，尽管有一些实用程序可以减少繁琐。

如果您确实需要 JSON 数据，则只需删除 content-type 标头即可。 axios应该为你设置一个合适的content-type。

【讨论】：

【解决方案2】：

将您的方法作为 post 方法传递并定义放入表单数据 formData.append('_method', 'PUT') 。

     updateValue () {
            axios
                .post('http://127.0.0.1:5000/lamp/' + this.$route.params.id,
                {value: this.value, _method: 'PUT'},
                {headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            })
        }

【讨论】：

【解决方案3】：

尝试将方法字段添加到表单并像这样以邮寄方式发送

formData.append('_method', 'PUT')

然后尝试定期发送数据我认为它是这样工作的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
import axios from 'axios';
export default {
    data: function() {
        return {
            value: 0,
            lampName: 'Kitchen',
        };
    },
    mounted () {
        axios
        .get("http://127.0.0.1:5000/lamp/" + this.$route.params.id)
        .then(response => (this.value = response.data))
    },
    methods: {
        updateValue () {
            let formData = new FormData();
            formData.append("value", this.value);
            formData.append("lampName", this.lampName);
            formData.append('_method', 'PUT');

            axios
                .post('http://127.0.0.1:5000/lamp/' + this.$route.params.id,
                formData
            })
        }
    }
}
</script>

【讨论】：

@Tanaten 你刚刚拯救了我的一天，谢谢。我不知道在使用 axios 时我必须将 REST 方法附加到 put 上的表单数据。