CODEWITHSUNDEEP
vue.jsaxios
Paweł Paszenda
Paweł Paszenda

Reputation: 1

Problem with PUT request in axios with vue.js

I'm building a smart home application. I have a problem with sending PUT request to my rest api (I building it with flask), but when I try send request it gives me HTTP 400 error (( Uncaught (in promise) Error: Request failed with status code 400 )) . Can you help me?

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

Upvotes: 0

Views: 4829

Answers (3)

Tomatoes
Tomatoes

Reputation: 59

try to add the method field to the form and send it in post way like this

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

then try to send the data regularly I think it work like this:

<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>

Upvotes: 1

Jasim Juwel
Jasim Juwel

Reputation: 766

Pass your method as post method and define put in form data 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'
                }
            })
        }

Upvotes: 0

skirtle
skirtle

Reputation: 29092

So this is the failing request:

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

I don't know what your server is expecting but you're setting a content-type of application/x-www-form-urlencoded while sending JSON data. It seems likely this mismatch is the cause of your problems. You should be able to see this if you inspect the request in the Network section of your browser's developer tools.

If you need to use application/x-www-form-urlencoded then I suggest reading the axios documentation as you can't just pass in a data object like that:

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

In short, you need to build up the body string manually, though there are utilities to make that less onerous.

If you actually want JSON data then just remove the content-type header. Axios should set a suitable content-type for you.

Upvotes: 0

Related Questions