question: having problem posting object

[tony-kerz]

i have (coffeescript) code like this running in a browser:

    axios.post @props.url, {foo: 'bar'}
    .then (res) =>
      dbg 'handle-comment-submit: res=%o', res
      @setState data: res.data
    .catch (err) ->
      console.error 'handle-comment-submit: err=%o', err

and server side code like this running in a gulp task:

gulp.task 'server', ->
  gulp.src buildApp
  .pipe plug.webserver(
    livereload: false
    directoryListing: false
    open: true
    middleware: [
      bodyParser.urlencoded extended: false

      (req, res, next) ->
        dbg 'middleware: url=%s, method=%s', req.url, req.method
        if (req.url == '/comments.json') and (req.method == 'POST')
          fileName = "#{buildApp}/comments.json"
          fs.readFile fileName, (err, data) ->
            if err
              console.log 'read-file: err=%o', err
            comments = JSON.parse data
            dbg 'middleware: comments=%o, body=%o', comments, req.body # <--------
            comments.push req.body
            fs.writeFile fileName, JSON.stringify(comments, null, 4), (err) ->
              if err
                console.log 'write-file: err=%o', err
              res.setHeader 'Content-Type', 'application/json'
              res.setHeader 'Cache-Control', 'no-cache'
              res.end JSON.stringify(comments)
        else
          next()
    ]

the log message with the <------- shows that body is empty like {}

but when using the following jquery code in the browser, the body is as expected:

$.ajax
      url: @props.url
      dataType: 'json'
      type: 'POST'
      data: comment
      success: (data) =>
        dbg 'handle-comment-submit: data=%o', data
        @setState data: data
      error: (xhr, status, err) =>
        console.error @props.url, status, err.toString()

i'm sure i'm being a dunce, but any guidance as to what i might do to get the desired effect with axios?

regards,
tony

[mzabriskie]

What version are you using?

[tony-kerz]

"axios": "~0.5.4"

a little more info:

axios:

jquery:

[mzabriskie]

So it looks like the payload is being sent, but the Accept, and Content-Type headers are different. Is your server ignoring the body since it's expecting a different header value?

[mzabriskie]

@tony-kerz ping

[tony-kerz]

hey @mzabriskie, sorry to leave you hangin, got distracted, but put in a few cycles just now, and we can safely chalk this up to operator-error. the following setup worked for the gulp based server and body-parser middleware:

gulp.task 'server', ->
  gulp.src buildApp
  .pipe plug.webserver(
    livereload: false
    directoryListing: false
    open: true
    middleware: [
      bodyParser.json()

      (req, res, next) ->
        if (req.url == '/comments.json') and (req.method == 'POST')
          fileName = "#{buildApp}/comments.json"
          fs.readFile fileName, (err, data) ->
            if err
              console.log 'read-file: err=%o', err
            comments = JSON.parse data
            comments.push req.body
            fs.writeFile fileName, JSON.stringify(comments, null, 4), (err) ->
              if err
                console.log 'write-file: err=%o', err
              res.end JSON.stringify(comments)
        else
          next()
    ]
  )

i originally tried bodyParser.json instead of bodyParser.json() which was the issue.

so axios was working great, i just wasn't using the express components correctly,
sorry bout that, but thanks for the help!

regards,
tony.

[mzabriskie]

Glad you got it figured out 👍