ReactTS，POST 对 API 的请求失败，出现 415 不支持的媒体类型

Question

我想将数据从 ReactTS 发送到 API。
尝试使用 Postman 时，数据可以毫无问题地发布。

API:

        [HttpPost]
        public async Task<ActionResult<Ticket>> PostTicket([FromBody]Ticket ticket)
        {
            _context.TicketList.Add(ticket);
            await _context.SaveChangesAsync();

            return CreatedAtAction("GetTicket", new { id = ticket.Id }, ticket);
        }

注意：当我更改 [FromBody] => [FromForm] 时，请求通过，所有值为 "null"

这是ReactTS中的代码：

const TicketAdd = () => {
  const [ticketNameValue, setTicketName] = useState("");
  const [eventLocationValue, setEventLocation] = useState("");
  const [extraInfoValue, setExtraInfo] = useState("");
  const [eventDateValue, setEventDate] = useState("");
  const [formError, setFormError] = useState("");

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTicketName(e.target.value);
  };

  const handleLocationChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEventLocation(e.target.value);
  };

  const handleInfoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setExtraInfo(e.target.value);
  };

  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEventDate(e.target.value);
  };

  const handleAddClick = () => {
    setFormError("");
    if (ticketNameValue !== "" && eventLocationValue !== "" && 
          extraInfoValue !== ""&& eventDateValue !== "") {
        const ticketObj = { 
                      ticketName:ticketNameValue, 
                      eventLocation:eventLocationValue, 
                      extraInfo:extraInfoValue, 
                      eventDate:eventDateValue};
        console.log(ticketObj);

        fetch('http://localhost:5000/api/tickets', 
        {method: 'POST', mode: 'no-cors', headers:{'Content-Type': 'application/json'},
         body: JSON.stringify({ticketObj}) })

    }
    else {
      setFormError("Insufficient data");
    }
  };

  return (
    <Form
      style={{
        margin: "10px 0px"
      }}
      onSubmit={e => e.preventDefault()}
    >
      <div>
          <Label>Ürituse nimi</Label>
          <Input
            type="text"
            value={ticketNameValue}
            onChange={handleNameChange}
            placeholder="Ürituse nimi"
          />
          <Label>Ürituse toimumiskoht</Label>
          <Input
            type="text"
            value={eventLocationValue}
            onChange={handleLocationChange}
            placeholder="Ürituse toimumiskoht"
          />
          <Label>Toimumiskuupäev</Label>
          <Input
            type="date"
            value={eventDateValue}
            onChange={handleDateChange}
            placeholder="Toimumiskuupäev"
          />
          <Label>Lisainfo</Label>
          <Input
            className="field"
            type="textarea"
            value={extraInfoValue}
            onChange={handleInfoChange}
            placeholder="Lisainfo"
          />
        {formError ? <p style={{ color: "red" }}>{formError}</p> : ""}
      </div>
      <Button color="primary" onClick={handleAddClick}>
        Lisa pilet
      </Button>

      <Link to='./tickets'>
        <Button color='primary' onClick={()=>{}}>
          Tagasi
        </Button>
      </Link>
    </Form>
  );
};

export default TicketAdd;

这是我从浏览器得到的错误：

有什么想法吗？谢谢

Answer 1

也许真正的问题是api

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
         app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    }

尝试将 Usecors 添加到您的 startup.cs

ReactTS，POST 对 API 的请求失败，出现 415 不支持的媒体类型

ReactTS, POST request to API fails with 415 unsupported media type

api

reactjs

react-tsx