无法使用javascript获取api发布到typicode json服务器

我有一个react项目，我试图将一个JSON对象发布到我的Typicode模拟JSON服务器

提取失败，但我无法确定问题所在。可能fetch调用有问题，我想知道为什么以及如何修复它

下面是调用fetch方法的react组件

import React from "react";

class AddAnimal extends React.Component {
  constructor(props) {
    super(props);
    this.state = { animal: "animal", amount: 0, price: 0, sound: "sound" };
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="animal"
          value={this.state.animal}
          onChange={this.handleOnChange}
        />
        <input
          type="number"
          name="amount"
          value={this.state.amount}
          onChange={this.handleOnChange}
        />
        <input
          type="number"
          name="price"
          value={this.state.price}
          onChange={this.handleOnChange}
        />
        <input
          type="text"
          name="sound"
          value={this.state.sound}
          onChange={this.handleOnChange}
        />
        <input type="submit" className="btn" value="add Animal" />
      </form>
    );
  }
  handleOnChange = e => {
  this.setState({[e.target.name]: e.target.value} );
  console.log(this.state);
  };

  handleSubmit = e => {
      e.preventDefault();
    if(this.state.amount === 0 || this.state.animal === "" || this.state.price === 0 || this.state.sound === ""){
        alert("you need to put information in all fields!");
        return false;
    }
    this.props.post(this.state);
  }
}

export default AddAnimal;

这就是数据库的外观和结构。这是为了显示JSON在发布之前必须采用的格式

{
  "animals": [{
      "animal": "dogs",
      "sound": "woof!",
      "amount": 20,
      "price": 200
    },
    {
      "animal": "cats",
      "sound": "meow!",
      "amount": 15,
      "price": 150
    },
    {
      "animal": "horses",
      "sound": "yhgighighrr",
      "amount": 4,
      "price": 950
    }
  ]
}

这是浏览器在输入详细信息后尝试提交表单时提示我的错误

App.js:36 OPTIONS https://localhost:3000/animals net::ERR_CONNECTION_CLOSED
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081

&&

---

typicode json服务器只接受数据库中对象的id，不会与https连接一起工作。您需要验证您的后端，使其工作

每当我在AJAX错误日志中看到选项时，我的第一个想法就是CORS。你试过禁用它吗

jsonServer.defaults（{noCors:true}）

App.js:36 OPTIONS https://localhost:3000/animals net::ERR_CONNECTION_CLOSED
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081

localhost/:1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)        
postAnimal  @   App.js:36
AddAnimal._this.handleSubmit    @   addAnimal.jsx:51
callCallback    @   react-dom.development.js:147
invokeGuardedCallbackDev    @   react-dom.development.js:196
invokeGuardedCallback   @   react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @   react-dom.development.js:265
executeDispatch @   react-dom.development.js:571
executeDispatchesInOrder    @   react-dom.development.js:596
executeDispatchesAndRelease @   react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @   react-dom.development.js:704
forEachAccumulated  @   react-dom.development.js:676
runEventsInBatch    @   react-dom.development.js:844
runExtractedEventsInBatch   @   react-dom.development.js:852
handleTopLevel  @   react-dom.development.js:5025
batchedUpdates$1    @   react-dom.development.js:19904
batchedUpdates  @   react-dom.development.js:2246
dispatchEvent   @   react-dom.development.js:5105
interactiveUpdates$1    @   react-dom.development.js:19966
interactiveUpdates  @   react-dom.development.js:2267
dispatchInteractiveEvent    @   react-dom.development.js:5081