NuxtJS axios post to cockpit CMS

Question

I'm currently building a nuxtjs project with cockpit as my headless CMS. Currently I find an issue in using axios for submitting the post data. When using the following fetch it's working as intended:

fetch('/api/forms/submit/Inschrijven?token=xxxtokenxxx', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
       form: {
            author: 'John Doe',
            content: 'Something',
            published: true
        }
    })
});

But sadly fetch isn't supported by IE, a browser which is required by this project. Therefor we are using axios for our requests but using axios.post on the same url as above always returns 'Path not found'.

axios.post('/api/forms/submit/Inschrijven?token=xxtokenxx', {
    author: 'John Doe',
    content: 'Something',
    published: true
})
.then(entry => entry.json())
.then(entry => console.log(entry));

I suspect there is something wrong in the API which doesn't recognises this as a genuine json post. Anybody here has a clue on why the axios.post doesn't work?

Answer 1

I previously worked with cockpit cms and nuxtjs and i can say a couple of things are different from how you made your request.

1. You failed to pass the headers

2. Use JSON.stringify

   axios.post( 'https://something.com/api/forms/submit/contact?token=XXX', JSON.stringify({ form: { name: this.name, model: this.carModel, service: this.service, number: this.models.phoneNumber } }), { headers: { 'Content-Type': 'application/json' } } ) Similar to the example on the docs

   fetch('/api/forms/submit/cockpitForm?token=xxtokenxx', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ form: { field1: 'value1', field2: 'value2' } }) }) .then(entry => entry.json()) .then(entry => console.log(entry));