The correct way of POSTing data using Fetch to be used by Formidable

// React redux saga simplified view
  const { loginEmail, loginPwd } = request.payload;
  
  let postLoginSubmitOptions = {
    method: "POST",
    headers: new Headers({'content-type': 'application/x-www-form-urlencoded'}),
    mode: 'no-cors',
    body: JSON.stringify({
      loginEmail: loginEmail,
      loginPwd: loginPwd
    })
  };

   const response = yield call(fetch, `http://www.example.com/register`, postLoginSubmitOptions);

// express simplified view

router.post('/register', function(req, res, next) {
  console.log('registering user');
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3333');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  
  var form = new formidable.IncomingForm();

  form.parse(req, function(err, fields, files) {
    if(err){
      console.log(err);
    }
    console.log(`incoming fields via form parse`);
    console.log(fields); //{ '{"loginEmail":"[e-mail]","loginPwd":"my-password"}': '' }
    console.log(fields.loginEmail); // undefined
  });

I’ve tried different Content-types, setting different Headers manually and also with “new Headers”, using new FormData() then data.append and body: data. Nothing works. I’ve enabled and disabled body-parser in app.js. The best I can do is getting this weird fields - { “string”: “empty_string” }. What am I doing wrong?

[dantenovski]

I don’t know where exactly the problem was but tried encoding data differently and then it worked. Getting a nice parsed object now with formidable: { loginEmail: ‘[e-mail]’, loginPwd: ‘asjdfkjsadlf’ }

function sendData(data) {
  const { loginEmail, loginPwd } = request.payload;
  const body = { loginEmail, loginPwd };
  var urlEncodedData = "";
  var urlEncodedDataPairs = [];
  var name;
 
  for(name in body) {
    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(body[name]));
  }
  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

  var httpHeaders = { 
    'Content-Type' : 'application/x-www-form-urlencoded', 
    'Accept' : 'application/json'
  }

  let postOptions = {
    method: 'post',
    headers: new Headers(httpHeaders),
    /*mode: 'no-cors',*/
    body: urlEncodedData
  };

  try {
    const response = yield call(fetch, `http://www.example.com/register`, postOptions);
    const data = yield call([response, response.json]);
    console.log(`data returned by fetch`);
    console.log(data);
    yield put({type: 'LOGIN_SUBMIT_RESPONSE', payload: data.message})
  } catch (e) {
    console.log(`error fetch post object`);
  }
}

Thanks everyone!

[tunnckoCore]

Oh yea. And also can try curl POST from terminal or at least https://www.hurl.it, so we can see if it is in the backend (formidable + express server) or on the frontend requesting logic.