Unable to post data to my API from a react form

I want to post data to my API from this form. But unfortunately, there is a Server error. Could anybody tell what exactly is the problem? (I observed that the id is not being generated for the object) This is the error that I'm getting in the console after clicking on submit button:

POST https://alert-amigo-api.herokuapp.com/products 500 (Internal Server Error) Response {type: "cors", url: "https://alert-amigo-api.herokuapp.com/products", redirected: false, status: 500, ok: false, …} type: "cors" url: "https://alert-amigo-api.herokuapp.com/products" redirected: false status: 500 ok: false statusText: "Internal Server Error"

This is my code:

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;

A 500 error code is a server-side error. Thus you should be debugging your API code, not your react code to get to the bottom of the problem.

With that said, the error message indicates a CORS error. If you are not familiar with Cross-Origin Resource Sharing (CORS), I encourage you to go read and familiarize yourself with that before continuoing your troubleshooting.

This error is most likely caused by that fact that the domain that is hosting your reactjs component is not the same as where your api is hosted (alert-amigo-api.herokuapp.com), and either 1) that API is not configured for cross-origin requests, or 2) it is configured for CORS, but your reactjs client has not set the correct headers to enable the pre-flight requests necessary for CORS.

Have a look at the following for more information:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://cors-anywhere.herokuapp.com/
https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9
https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/cors.md