Axios post stay on pending

Question

This is a simple Post request using Axios inside Vue:

import axios from 'axios'
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    mounted () {
        const code = 'test'
        const url = 'http://localhost:3456/'
        axios.post(url, code, { headers: {'Content-type': 'application/x-www-form-urlencoded', } }).then(this.successHandler).catch(this.errorHandler)
    },
    methods: {
        successHandler (res) {
            console.log(res.data)
        },
        errorHandler (error) {
            console.log(error)
        }
    }
}

The Get method works fine. But Post stay as "Pending" on Network tab. I can confirm that there is a Post method on my webservice and it return something (tested on Postman).

UPDATE

Sending code as a param:

axios(url, {
    method: 'POST',
    headers: {
        'content-type': 'application/json',
    },
    params: {
        code : 'test'
    },
}).then(this.successHandler).catch(this.errorHandler)

WEBSERVICE

server.post('/', (req, res, next) => {
    const { code }  = req.params
    const options = {
        validate: 'soft',
        cheerio: {},
        juice: {},
        beautify: {},
        elements: []
    }
    heml(code, options).then(
        ({ html, metadata, errors }) => {
            res.send({metadata, html, errors})
            next()      
        })
})

Solution

I think there's issue with your axios request structure. Try this:

const URL = *YOUR_URL*;
axios(URL, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    data: *YOUR_PAYLOAD*,
  })
    .then(response => response.data)
    .catch(error => {
      throw error;
    });

If you're sending a query param:

axios(URL, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    params: {
     code: 'your_string'
    },
  })

if it is path variable you can set your url:

const url = `http://localhost:3456/${code}`

Let me know if the issue still persists

Comments

[marcelo2605]

Now something happens. But it's an error: code: "InvalidContent", message: "Invalid JSON: Unexpected token e in JSON at position 1". My webservice expect a parameters called code and it's must be a string.

[Sakhi Mansoor]

I would recommend to stick with application/json content type. You should send {code: 'your_string'} and on server side you would get a JSON and you can retrieve 'code' key from request payload. The issue with your post request is fixed it's an issue with parsing.

[marcelo2605]

OK, I wil try this. Just another question: I'm running webservice on localhost:3456 and vue app on localhost:8080. This is a problem?

[Sakhi Mansoor]

No that's not the problem you're in the same domain network. Unless you deploy it somewhere then you need to enable CORS for development purpose. I hope this would clarify most of the things, Let me know if you have any other query. happy to help

[Sakhi Mansoor]

make sure that you use both 'then' and 'catch' Otherwise you will not handle errors and you will get that warning. check out this you would get the basic understanding stackoverflow.com/questions/40920179/…

[marcelo2605]

Found the problem. My webservice expect code as a param.

[marcelo2605]

But I test with your code and it not working. The parameter is not arriving in webservice. Could you see the code above?

[Sakhi Mansoor]

which one is required Path varaible or Query Pram? Please specify

[marcelo2605]

I posted the Post route of webservice above.

[Sakhi Mansoor]

are you using expressJs for server implementation ?

[marcelo2605]

No, I'm using Restify

[marcelo2605]

I'm using bodyParser

[Sakhi Mansoor]

bodyparser is for request body parsing. Try query parser as well.

[marcelo2605]

Fixed! Instead using const { code }= req.params on webservice, I changed to const { code } = req.body