getting an internal server error when I try to make a request to a Seneca.js API using Axios

Question

I wrote a simple Seneca plugin that I will eventually use to listen for http messages:

buyer.js

module.exports = function buyer (){

    this.add('role:buyer, action: acceptOffer', function(msg, respond){
        respond(JSON.stringify({answer: msg.id}))
    })
}

When I run this with the following script:

index.js

require('seneca')()
    .use(require('./designs/offer/roles/buyer.js'))
    .listen()

I can now send POST requests to localhost:10101/act and use the plugin:

curl -d '{"role": "buyer", "action": "acceptOffer", "id": "12"}' http://localhost:10101/act
{"answer":"12"}

Here's where things get messy. I now want to make this http request through a web app, so I use axios to make a request like this from a web page:

App.vue

<template>
    <div id="app">
        <button @click="sendQuery"></button>
    </div>
</template>

<script>
 import axios from 'axios';

 export default {
     name: 'App',
     data(){
         return {
             postBody: {
                 id: '12',
                 role: 'buyer',
                 action: 'acceptOffer'
             }
         }
     },
     methods: {
         sendQuery: function(){
             var body = JSON.stringify(this.postBody)
             axios.post(`http://localhost:10101/act`, {
                 body: body
             })
         }
     }
 }
</script>

When I click the button to send the request, I get this error message from my browser console (after I enable CORS):

xhr.js?ec6c:178 POST http://localhost:10101/act 500 (Internal Server Error)
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
Axios.(anonymous function) @ Axios.js?5e65:71
wrap @ bind.js?24ff:9
sendQuery @ App.vue?26cd:26
boundFn @ vue.esm.js?efeb:190
invoker @ vue.esm.js?efeb:2004
fn._withTask.fn._withTask @ vue.esm.js?efeb:1802
createError.js?16d0:16 Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js?16d0:16)
    at settle (settle.js?db52:18)
    at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)

Can anyone tell me why this works differently than curl? Why can't I get my response?

Answer 1

Yup, tested locally and your problem indeed seems to be with Stringify, as mentioned in my comment, just send the data directly:

axios.post('http://localhost:10101/act', this.postBody)