isomorphic-unfetch throws 400 bad request in react component of NextJs

Question

I am trying to get some data from API in a React component in Next.js on the onChange event of a select box. I am using the isomorphic-unfetch module to make the hit on external API. But every time I make this hit I receive a 400 bad request. I have tried that hit with the same set of data on postman and it works right but just not in my code.

Edit: I have just found out that the JSON data which is written after the declaration of the URL to hit is not being sent. I mean that in this

fetch("https://loyalty.xgate.com/customer/w1/redeemable_cash_preview", {
        method: 'POST',
        formData : hitData,
        headers: {
          "Content-type":"application/x-www-form-urlencoded",
          'Accept': 'application/json'
        }
      })

Only the URL https://loyalty.xgate.com/customer/w1/redeemable_cash_preview is being hit but the method or formData or headers are not going with the request.

This is the component I am using.

  import React, { Component } from 'react';
    import css from '../../redeemPopUp.css';
    import Link from 'next/link';
    import fetch from 'isomorphic-unfetch';
    import CashPreview from '../../pages/cashPreview';

    class Preview extends Component {
        state = {
            value: ""
          }

        cash = (id, event) =>{

          var hitData = {
            "account_id": "XXXX",
            "username": "XXXX",
            "password": "XXXX",
            "code": id,
            "points_to_redeem":event.target.value
          };

          fetch("https://loyalty.xgate.com/customer/w1/redeemable_cash_preview", {
            method: 'POST',
            formData : hitData,
            headers: {
              "Content-type":"application/x-www-form-urlencoded",
              'Accept': 'application/json'
            }
          })
          .then(function (result){
            console.log(result)        
          }).catch((err) => console.log(err))
        }


        render() { 
            return (
                <div>
                    <div className={css.modal_body}>

                    <div className={css.loyalty_row}>
                        <label

 className={css.tier_label} >Redeem Points:</label>
                    <select name="redeemPoints" onChange={(e)=>this.cash(this.props.id, e)}>
                        <option value="25000">25000</option>
                        <option value="20000">20000</option>
                        <option value="15000">15000</option>
                        <option value="10000">10000</option>
                        <option value="5000">5000</option>
                    </select>
                    {/* <div className={css.sep_line}></div> */}
                </div>
                <div className={css.loyalty_row}>
                    <label className={css.tier_label} >Redeem Points:</label>
                    <span className={css.tier_values}><strong>{this.state.value}</strong></span>      
                    <div className={css.sep_line}></div>
                </div>


                <div className={css.modal_footer}>
                    <Link href="#"><a href="#" className={css.btn} id="btn_ingresar">Redeem Points</a></Link>
                </div>
            </div>
            </div>
        );
    }
}

export default Preview;

This is my nextJs page

import Preview from "../components/Preview/Preview";
import {withRouter} from "next/router";  

const CashPreview = (props) =>{
    const {router} = props;
    console.log(router)
    return (
        <div>
            <Preview id= {router.query.id}/>
        </div>
    )
};

export default withRouter(CashPreview)

Here is the image of what i am getting in response.

Answer 1

add below code in your root file(app.js) of express app

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
    res.header("Access-Control-Allow-Credentials", "true");
  next();
});