Form POST call gives back empty response

[kristyn]

I am attempting to make a form POST request in a React/Node app. The request gets into Hubspot correctly, but on my React frontend I get a TypeError: Failed to Fetch or I get a failure with an empty response back.

I’m struggling to figure out what is causing that failed request. It also happens when I use ajax and axios instead of fetch. Any suggestions or ideas would be welcome!

Thanks!
KL

Here is the function that gets called onSubmit of the form:

fetch('/careers-submission', {
          method: 'post',
          headers: {
            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
          },
          body: 'email=' + email + '&firstname=' + firstName + '&lastname=' + lastName + '&linkedin_profile=' + linkedinUrl + '&careers_job_category=' + jobCategory
        })
        .then(res => {
          console.log(res)
          res.json() })
        .then(json => {
          dispatch(formSuccess(json))
          dispatch(formSubmittingComplete())
        })
          .catch(err => {
            console.log('error!', err)
            dispatch(formError(err))
            dispatch(formSubmittingComplete())
          })

This is my function in Node:

let postData = querystring.stringify({
  'email': req.body.email,
  'firstname': req.body.firstname,
  'lastname': req.body.lastname,
  'linkedin_profile': req.body.linkedin_profile ,
  'careers_job_category': req.body.careers_job_category,
  'hs_context': JSON.stringify({
    "hutk": req.cookies.hubspotutk,
    "ipAddress": req.headers['x-forwarded-for'] || req.connection.remoteAddress,
    "pageUrl": "http://www.xxx.com/careers/",
    "pageName": "Careers Job Category Page"
  })
})

let options = {
  hostname: 'forms.hubspot.com',
  path: '/uploads/form/v2/xxxxxx/xxxxxxxxxxxxxx',
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Length': postData.length
  }
}

let request = https.request(options, function(response){
  response.setEncoding('utf8')
  response.on('data', function(chunk){
    console.log('Body: ' + chunk)
  })
})

request.on('error', function(e){
  console.log('Problem with request ' + e.message)
})

request.write(postData)
request.end()

[zwolfson]

Hey @klyncheski,

The Forms API doesn’t respond with any content so when you are doing a res.json() it’s trying to take an empty response and turn it into a JSON encoded string.

If you update your node endpoint to write back to your React app with the information it sent to HubSpot rather than the response it gets back from HubSpot (which won’t be anything) it should work.

-Zack

[kristyn]

Thanks @zwolfson ! That makes a lot of sense. I’m probably missing this because I’ve been staring at the code too long, but where would I update the endpoint to send the data back?

[zwolfson]

That depends on the framework (if any) you are using to create your webserver. For example if you were using Express you might have a handler that looks like

app.post('/careers-submission'){ (req, res) => {
   res.send(body)} 
}

You would want to adjust that body variable in this case.

-Zack