I've encountered an issue while trying to send an ajax request from a react/redux app to an express POST endpoint. Despite testing the server-side endpoint with Postman and confirming its correct operation, I keep receiving {message: "Missing credentials"} from passport authentication on the client side. The code snippet I'm using on the client seems fine as I have verified the data flow by logging out req.body.email and req.body.password on the server successfully through Postman. However, when I initiate this call using isomorphic-fetch with the code below, the req.body output on the server looks like this:
{ '------WebKitFormBoundaryKtn3SHumfq4YBeZ1\r\nContent-Disposition: form-data; name': '"email"\r\n\r\<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5abb1a0b6b185a1aaa8a4acabeba6aaa8">[email protected]</a>\r\n------WebKitFormBoundaryKtn3SHumfq4YBeZ1\r\nContent-Disposition: form-data; name="password"\r\n\r\ntestPassword\r\n------WebKitFormBoundaryKtn3SHumfq4YBeZ1--\r\n' }
import fetch from 'isomorphic-fetch'
import FormData from 'form-data'
export function signup(payload) {
return (dispatch) => {
let formData = new FormData()
formData.append('email',payload.email)
formData.append('password',payload.password)
fetch(`${baseURL}/signup`, {
method: 'post',
body: formData,
headers: new Headers({
'content-type': 'application/x-www-form-urlencoded; charset=utf-8',
'Accept': 'application/json, application/xml, text/plain, text/html, *.*'
}),
})
.then((res) => res.json())
.then((res) => {
console.log('Fetch signup result:',res)
console.log('dispatch:',dispatch)
dispatch({
type : Auth_Actions.SignUp_Success,
userObject : res
})
})
.catch((err)=>{
console.error('Fetch signup ERROR:',err)
dispatch({
type : Auth_Actions.SignUp_Fail,
userObject : err
})
});
}
}