Vue.js form with prerender shows existing form, but keeps sending back 404, could be a redirect issue?

Support
, ,
8

I managed to solve it after all. Let me leave the details here for later reference:

I extracted the Vue component’s html part into a simple feedback.html file and placed it in the public dir of the app. In the meantime, I updated my vue-router and served the Vue component on a different route. Submitting feedback.html worked like charm. I checked the network tab to see the difference between the two. They were mostly identical except for the data that was sent.

This is the one from the html:

await fetch("https://<my-domain>.netlify.app/feedback/result", {
    "headers": {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    "body": "form-name=feedback&bot-field=&feedback-text=test",
    "method": "POST",
});

and the one from the vue component:

await fetch("http://localhost:3000/feedback/result", {
    "headers": {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    "body": "bot-field=&feedback-text=test",
    "method": "POST"
});

As you can see, the form name is not included in the one posted by the Vue component. I’m not sure if this is an issue in Vue or it originated from the way I set up the component. However, I did not use JavaScript to post the data, only used good old form submit to do that.

After all, the solution was to use JavaScript, compile the URIEncoded data and POST it. Now it’s working and I could also get rid of the handmade feedback.html, as the PrerenderSPAPlugin takes care of it.

One thing I don’t understand: wouldn’t it be more semantically correct to send back 400 instead of 404 in this case? The status code mislead me as I thought there was a routing error, while it was malformed data that caused the issue.

1 Like