isomorphic-unfetch выбрасывает 400 неверных запросов в компонент реагирования NextJs - PullRequest
Новая
       11

isomorphic-unfetch выбрасывает 400 неверных запросов в компонент реагирования NextJs

0 голосов
/ 29 марта 2019

Я пытаюсь получить некоторые данные из API в компоненте React в Next.js по событию onChange окна выбора.Я использую модуль isomorphic-unfetch, чтобы использовать внешний API.Но каждый раз, когда я делаю этот удар, я получаю 400 плохих запросов.Я пробовал этот удар с тем же набором данных на почтальоне, и он работает правильно, но только не в моем коде.

Редактировать: я только что обнаружил, что данные JSON, которые записываются после объявленияURL для попадания не отправляется.Я имею в виду, что в этом 

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'
        }
      })

только URL https://loyalty.xgate.com/customer/w1/redeemable_cash_preview, но метод, или formData, или заголовки не идут с запросом.

Это компонент, который я использую.

  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;

Это моя следующая страница 

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)

Вот изображение того, что я получаю в ответ.enter image description here

1 Ответ

0 голосов
/ 29 марта 2019

добавьте приведенный ниже код в корневой файл (app.js) экспресс-приложения 

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();
});
...