Отправка в. NET Базовый WebAPI с ReactJS внешним интерфейсом и выборкой API - PullRequest
Новая
       94

Отправка в. NET Базовый WebAPI с ReactJS внешним интерфейсом и выборкой API

0 голосов
/ 02 мая 2020

Я учусь создавать. NET Core web api, поэтому я решил попробовать простой POST-запрос к бэкэнду с помощью fetch () во внешнем интерфейсе.

Front-end 

const Form = () => {
  const submission = {
    contactNumber: "123153214",
    name: "JJ Lin",
    group: 5,
    tableId: 3,
    isAccompanied: true,
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    fetch("https://localhost:5001/api/guest-submission", {
      method: "POST",
      mode: "no-cors",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(submission),
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("not ok" + response.status);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return <button onClick={handleSubmit}>Click here to submit</button>;
};

На бэкэнде у меня есть класс гостя: 

    public class Guest
    {
        public string ContactNumber { get; set; }
        public string Name { get; set; }
        public Group Group { get; set; }
        public int TableId { get; set; }
        public bool IsAccompanied { get; set; }
    }

С моим контроллером как таковым: 

[HttpPost]
        public ActionResult SubmitGuest([FromBody]Guest guestInput)
        {

            var guest = new Guest
            {
                ContactNumber = guestInput.ContactNumber,
                Name = guestInput.Name,
                Group = guestInput.Group,
                TableId = guestInput.TableId,
                IsAccompanied = guestInput.IsAccompanied
            };
            Console.WriteLine(guest.Name);

            return Ok();
        }

Использование Почтальона работало для меня. Но используя созданный мной интерфейс реакции, я продолжал получать ошибку 415.

Может кто-нибудь просветить меня, пожалуйста? Спасибо за вашу помощь !!!

1 Ответ

0 голосов
/ 03 мая 2020

Я только что прокомментировал режим : "no-cors" , и он работает (я изменил URL-адрес API и объект отправки для тестирования). Более того, вы используете POST-вызов, но в. Затем вы регистрируете «не в порядке», если состояние не равно 200, что не в порядке;) поскольку POST-вызов возвращает 201 для успешного создания данных на сервере. 

import React from "react";
const Form = () => {
    const submission = {
        title: 'This is title',
        body: 'This is body',
        userId: 1
    };
    const handleSubmit = async (event) => {
        event.preventDefault();
        fetch("https://jsonplaceholder.typicode.com/posts", {
            method: "POST",
            // mode: "no-cors",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(submission),
        })
        .then((response) => {
            console.log(response, 'response');
            if (response.status !== 200) {
                console.log("not ok" + response.status);
            }
        })
        .catch((err) => {
            console.log(err);
        });
    };

    return <button onClick={handleSubmit}>Click here to submit</button>;
};

export default Form

Обновление:

Необходимо включить CORS при запуске. В файле startup.cs добавьте следующий код в функцию ConfigureServices перед строкой 'services.AddControllers ();' 

services.AddCors(options =>
        {
            options.AddDefaultPolicy(
                builder =>
                {
                    builder.WithOrigins("http://localhost: 3000");
                });
        });  
    }

И в свой метод Configure при запуске добавьте следующий код: app.UseCors ();

...