ReactTS, POST-запрос к API завершается с 415 неподдерживаемым типом носителя - PullRequest
Новая
       37

ReactTS, POST-запрос к API завершается с 415 неподдерживаемым типом носителя

0 голосов
/ 21 марта 2020

Я хочу отправить данные из ReactTS в API. При попытке с Почтальоном данные публикуются без проблем.

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;

Это ошибка, которую я получаю из браузера:

enter image description here

Любой мысли? Спасибо

1 Ответ

0 голосов
/ 21 марта 2020

Может быть, настоящая проблема в API 

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

Попытайтесь добавить Usecors в свой startup.cs

...