javascript - Consuming a Hapi JS API from a separate Vue JS Frontend. request.payload is undefined

Question

I'm having my first steps on Hapi JS. My app connects with a SQL Server DB.

However, I'm tryng to send login data from Vue CLI JS frontend to Hapi JS Api, I'm using axios for this. A Login is a "SELECT * FROM" query, so I put "get" in the axios function code.

This is the function that works but i can't send password by URL, it's not safe, with F12 you'll can see the user credentials for free encrypted or not.

And this is the Hapi JS route that receives the data. It works like this, but it's not worth for me doing this. I want my code work like this:

Axios function

Hapi JS route with "request.payload" instead "request.query"

But when I try this, there is an error in console that says: "Cannot destructure username from request.payload of undefined" and in fact a console.log of request.payload is undefined :C I really need help.

question from:https://stackoverflow.com/questions/65923289/consuming-a-hapi-js-api-from-a-separate-vue-js-frontend-request-payload-is-unde

Answer 1

Your problem stems from your endpoint HTTP method. An HTTP GET request cannot have a payload. You should send it as a POST request instead.

On axios:

axios.post(config.url, { username: parametros.username, password: parametros.password }).then(...)

On the hapi side you should set method: 'POST' in your route definition. That way you should now have access to the request.payload property. You should also validate the payload that you receive from your client. Here is some documentation on it: https://hapi.dev/tutorials/validation/?lang=en_US.

Also on a side note, if you want to add a cookie to the response of the server you should set it using the Response Toolkit (the second parameter h in your handler):

return h.response(someValue).state('auth-cookie', { NOM_USUARIO: account.NOM_USUARIO })

Here is some documentation to help you out: https://hapi.dev/api/?v=20.1.0#-hstatename-value-options

Good luck and hapi coding. ??