Two forms, same token but one gets TokenMismatch

I have two forms submitted via ajax. They use the exact same token, but one fails with a TokenMismatchException. This is the first form:

let formData = new FormData();

// this.token is set in the Vue ready() method
formData.append('_token', this.token);

formData.append('image', files[0]);

this.$http.post('/tempimages', formData).then((response) => {
    this.tempImage = response.data;
}, (response) => {
    this.errors = response.data;

    this.errors[ele.target.name] = response.data['image'];
});

This first one works fine. The second form:

// same token as in the first form, set in the ready() method
this.form.append('_token', this.token);

this.$http.patch('/profile', this.form).then((response) => {
    // do stuff
}, (response) => {
    // do stuff
});

This second one fails. Both forms use the same middleware. The first form fails if I remove the token from the form data so I know its checking it. Any ideas?

zachleigh

9 years ago

Best Answer

Level 47

Should have been a post request. Always forget that....

this.form.append('_token', this.token);

this.form.append('_method', 'PATCH');

this.$http.post('/profile', this.form).then((response) => {
    // do stuff
}, (response) => {
    // do stuff
});

Not quite sure why that was throwing a TokenMismatch exception....

Please or to participate in this conversation.