Request aborted from VueJS to a backend REST Service-CodePudding

I'm coding a VueJS CRUD to wrap a REST server Endpoint. I managed to make it work the updateUser/deleteUser but the createUser does not work:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
new Vue({
    el: "#app",
    data() {
        return {
            name: '',
            surname: '',
            users: []
        }
    },
    methods: {


        updateUser: function(id) {

            axios.put("/customers?id="   id   "&name="   this.name   "&surname="   this.surname)
                .then(response => {
                    this.listUsers()
                })
            this.name = '';
            this.surname = '';
        },

        deleteUser: function(id) {

            axios.delete("/customers?id="   id)
                .then(response => {
                    this.listUsers()
                })
        },

        createUser: function() {

            var user = {
                name: this.name,
                surname: this.surname
            };


            axios.post("/customers", JSON.stringify(user), {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    this.listUsers();
                })
                .catch(error => {
                    console.log(error);
                });


        },
        listUsers: function() {
            axios.get("/customers")
                .then(response => {
                    this.users = response.data
                })
        }
    },
    mounted: function() {

        this.listUsers()
    }


})

</script>

When I try to invoke createUser from the submit:

<input type="submit" value="Save" @click="createUser"/>

The following error is reported in the JS Console:

Error: Request aborted
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    onabort https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    promise callback*r.prototype.request https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    e https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:2
    createUser http://localhost:8080/?:145
    VueJS 23
        invoker
        _withTask
        add$1
        updateListeners
        updateDOMListeners
        invokeCreateHooks
        createElm
        createChildren
        createElm
        createChildren
        createElm
        createChildren
        createElm
        patch
        _update
        updateComponent
        get
        Watcher
        mountComponent
        $mount
        $mount
        _init
        Vue
    <anonymous>

I have verified that the Rest endpoint works correctly with curl:

curl -X POST http://localhost:8080/customers -H 'Content-Type: application/json'   -d '{"name":"john","surname":"smith"}'

Any idea how to fix it? Just to note, the server endpoint is not reached at all when I call the createUser funciton.

CodePudding user response：

I remember that I have faced the same issue try to change your input type :

<input type="button" value="Save" @click="createUser"/>

I don't really have an explanation why type="submit" causes this Request aborted Error