Невозможно отправить данные в мой API из формы реакции

Question

Я хочу отправлять данные в свой API из этой формы. Но, к сожалению, произошла ошибка Сервера. Может ли кто-нибудь сказать, в чем именно проблема? (Я заметил, что идентификатор не создается для объекта) Это ошибка, которую я получаю в консоли после нажатия кнопки отправки:

POST https://alert-amigo-api.herokuapp.com/products 500 (внутренняя ошибка сервера) Ответ {type: "cors", url: " https://alert-amigo-api.herokuapp.com/products", перенаправлено: false, status: 500, ok: false, â € ¦} тип: "cors" url: " https://alert-amigo-api.herokuapp.com/products" перенаправлено: false status: 500 ok: false statusText: "Внутренняя ошибка сервера"

Это мой код:

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import { Form, FormControl, FormCheck } from 'react-bootstrap';
import { FormGroup, ControlLabel, Row, Button, Checkbox, Radio, HelpBlock } from "react-bootstrap";

function FieldGroup({ id, label, help, ...props }) {
return (
    <FormGroup controlId={id}>
    <ControlLabel>{label}</ControlLabel>
    <FormControl {...props} />
    {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

class Typography extends Component {
  constructor() {
    super();

    this.state = {
      productName: '',
      productPrice: '',
      productCategory: '',
      productBrand: '',
      countryOfOrigin: '',
      riskType: '',
      alertSubmittedBy: '',
      yourCity: '',
      yourAddress: '',
      productImage: '',
      description: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  changeHandler = e => {
    this.setState({[e.target.id]: e.target.value})
  }

  handleSubmit(e) {
      e.preventDefault();

      console.log('The form was submitted with the following data:');
      console.log(this.state);
    fetch('https://alert-amigo-api.herokuapp.com/products',{
        method: 'POST',
        headers: {
            Accept: 'application/json',
                    'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.state)
    }).then(response => {
            console.log(response)
        })
        .catch(error =>{
            console.log(error)
        });

}

  render() {
    return (
      <div className="typoForm">
  <form onSubmit={this.handleSubmit}>
    <FieldGroup
      id="productName"
      name="productName"
      type="text"
      label="Product Name"
      placeholder=""
      value={this.state.productName}
      onChange={this.changeHandler}
    />
    <FieldGroup
      id="productPrice"
      name="productPrice"
      type="number"
      label="Product Price (in Euros)"
      placeholder=""
      value={this.state.productPrice}
      onChange={this.changeHandler}
    />
    <FormGroup controlId="productCategory" name="productCategory">
      <ControlLabel>Category</ControlLabel>
      <FormControl componentClass="select" name="productCategory" placeholder="select" onChange={this.changeHandler} value={this.state.selectValue}>
        <option value="select">select the category to which the product belongs to</option>
        <option value="electronics">Electronics</option>
        <option value="cosmetics">Cosmetics</option>
        <option value="apparels">Apparels</option>
        <option value="footwear">Footwear</option>
        <option value="accessories">Watches/Accessories</option>
        <option value="handbags">Handbags/Wallets</option>
        <option value="pharmaceuticals">Pharmaceuticals/Personal Care</option>
        <option value="Toys">Toys</option>
      </FormControl>
    </FormGroup>
    <FieldGroup
      id="productBrand"
      name="productBrand"
      type="text"
      label="Product Brand"
      placeholder=""
      value={this.state.productBrand}
      onChange={this.changeHandler}
    />
    <FieldGroup
      id="countryOfOrigin"
      name="countryOfOrigin"
      type="text"
      label="Country Of Origin"
      placeholder=""
      value={this.state.countryOfOrigin}
      onChange={this.changeHandler}
    />
    <FormGroup controlId="riskType" name="riskType">
      <ControlLabel>Risk Type</ControlLabel>
      <FormControl componentClass="select" placeholder="select" name="riskType" onChange={this.changeHandler} value={this.state.selectValue}>
        <option value="select">select the level of risk</option>
        <option value="high">high</option>
        <option value="medium">medium</option>
        <option value="low">low</option>
      </FormControl>
    </FormGroup>
    <FormGroup controlId="alertSubmittedBy" name="alertSubmittedBy">
      <ControlLabel>Alert Submitted By</ControlLabel>
      <FormControl componentClass="select" onChange={this.changeHandler} name="alertSubmittedBy" placeholder="select" value={this.state.selectValue}>
        <option value="select">select</option>
        <option value="producers">producers</option>
        <option value="consumers">consumers</option>
        <option value="distributors">distributors</option>
      </FormControl>
    </FormGroup>
    <FieldGroup
      id="yourCity"
      name="yourCity"
      type="text"
      label="Your City"
      placeholder=""
      value={this.state.yourCity}
      onChange={this.changeHandler}
    />
    <FormGroup controlId="yourAddress" name="yourAddress">
      <ControlLabel>Your Address</ControlLabel>
      <FormControl componentClass="textarea" name="yourAddress" onChange={this.changeHandler} value={this.state.value} placeholder="Enter your address here" />
    </FormGroup>
    <FieldGroup
      id="productImage"
      name="productImage"
      type="file"
      label="File"
      value={this.state.value}
      onChange={this.changeHandler}
      help="Upload an image of the product."
    />
    <FormGroup controlId="description" name="description">
      <ControlLabel>Please mention the defaults of the product</ControlLabel>
      <FormControl componentClass="textarea" name="description" onChange={this.changeHandler} value={this.state.value} placeholder="" />
    </FormGroup>

    <Button type="submit">Submit</Button>
  </form>
  </div>

    );
  }
}
export default Typography;

Answer 1

Код ошибки 500 - это ошибка на стороне сервера. Таким образом, вы должны отлаживать свой код API, а не код реакции, чтобы разобраться в проблеме.

При этом сообщение об ошибке указывает на ошибку CORS. Если вы не знакомы с Cross-Origin Resource Sharing (CORS), я рекомендую вам прочитать и ознакомиться с ним, прежде чем продолжить устранение неполадок.

Эта ошибка, скорее всего, вызвана тем фактом, что домен, на котором размещен ваш компонент reactjs, не совпадает с тем, где размещен ваш api (alert-amigo-api.herokuapp.com), и либо 1) этот API не настроен для кросс-исходные запросы, или 2) он настроен для CORS, но ваш клиент reactjs не установил правильные заголовки для включения предполетных запросов, необходимых для CORS.

Для получения дополнительной информации
ознакомьтесь со следующим: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://cors-anywhere.herokuapp.com/
https://medium.com / @dtkatz / 3-способа-исправить-ошибку-корс-и-как-доступ-контроль-разрешить-происхождение-работает-d97d55946d9
https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/cors.md