时间戳

首页 > 解决方案 > isomorphic-unfetch 在 NextJs 的反应组件中抛出 400 个错误请求

reactjs - isomorphic-unfetch 在 NextJs 的反应组件中抛出 400 个错误请求

问题描述

我正在尝试在选择框的 onChange 事件上从 Next.js 的 React 组件中的 API 获取一些数据。我正在使用 isomorphic-unfetch 模块来访问外部 API。但是每次我做这个命中时，我都会收到一个 400 错误的请求。我已经在邮递员上使用相同的数据集尝试了该命中，它可以正常工作，但在我的代码中却不行。

编辑：我刚刚发现在声明要命中的 URL 之后写入的 JSON 数据没有被发送。我的意思是在这个

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;

这是我的 nextJs 页面

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)

这是我得到的回应的图像。 在此处输入图像描述

标签： reactjsnext.jsisomorphic-fetch-api

解决方案

在 express 应用程序的根文件（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();
});

推荐阅读