使用 ReactJS 前端发布到 .NET Core WebAPI 并获取 api

Question

我正在学习如何构建 .NET Core Web api，因此我决定尝试在前端使用 fetch() 向后端发送一个简单的 POST 请求。

前端

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();
        }

使用 Postman 对我有用。但是使用我构建的 react 前端，我一直收到 415 错误。

有人可以启发我吗？谢谢你的帮助！！！

Answer 1

我刚刚评论了 mode: "no-cors" 并且它正在工作（我更改了 api url 和提交对象以进行测试）。此外，您正在使用 POST 调用，但在 .then 中，如果状态不是 200，则记录“not ok”；）因为 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 文件中，在“services.AddControllers();”行之前的 ConfigureServices 函数中添加以下代码

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

并在您的启动配置方法中，添加以下代码：app.UseCors();