如何使用 JavaScript 从 .NET Core 3.1 正确调用 HttpPost 方法避免 400 错误

Question

在 .NET Core 3.1 中进行实验

我显然缺少 Core 中 HttpPost 的一个 KEY 元素。 我想将 JSON 传递给 controller 并在后面的代码中从 JSON 获得我需要的东西。 运行它总是提供 400（错误请求）永远不会进入 function，所以我相信这是一件基本的事情。 我还尝试使用 jQuery POST 方法$.post("/nodes", item, function () { alert("success");})并返回 415（不支持的媒体类型）。

我已经尝试了几个动作参数 frombody，fromheader，from request。 FromBody 似乎应该是那个。 我根据其他帖子添加了 CORS 只是为了消除。 如果重要的话，纯 html 文件在项目中，它不是 cshtml。 除了 jQuery 之外，没有客户端框架。我不想要特定于框架的答案（angular、moo、vue、react 等）。 看起来，如果做得正确，我们应该能够在最基本的层面上做到这一点。 香草 javascript 或 jQuery 的回答会让我顺利上路。

fwiw：GET 都有效。

// Client side JavaScript. 
var item = {
    id: "9f14a706-e750-4b76-8ba5-78d890bbdf0d"
};

$.ajax({
    type: "POST",
    accepts: "application/json",
    url: '/nodes',
    contentType: "application/json",
    data: JSON.stringify(item),
    error: function (jqXHR, textStatus, errorThrown) {
        console.error("Something went wrong!");
        console.error(textStatus);
        console.error(errorThrown);
    },
    success: function (result) {
        console.log('Testing');
    }
});


/// NodesController.cs 
namespace INM.Controllers
{
[Route("[controller]")]
[ApiController]

    public class NodesController : ControllerBase
    {
        [HttpPost]
        public void Post([FromBody] string value)
        {
             var foo = "bar";
        }

        [HttpPut("{id}")]
        public void Put(int id, [FromBody] string value)
        {
            var foo = "bar";
        }
    }
}


    ///StartUp.cs
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddCors();
        services.AddControllers();
    }

            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            DeveloperExceptionPageOptions developerExceptionPageOptions = new DeveloperExceptionPageOptions
            {
                SourceCodeLineCount = 10
            };

            app.UseCors(builder =>
            {
                builder.WithOrigins("http://localhost:61246/")
                       .AllowAnyMethod()
                       .AllowAnyHeader()
                       .AllowAnyOrigin();
                //.AllowCredentials()
            });


            app.UseDeveloperExceptionPage(developerExceptionPageOptions);
        }

        FileServerOptions fileServerOptions = new FileServerOptions();
        fileServerOptions.DefaultFilesOptions.DefaultFileNames.Clear();
        fileServerOptions.DefaultFilesOptions.DefaultFileNames.Add("INM.html");

        app.UseFileServer(fileServerOptions); // combines app.UseDefaultFiles(); & app.UseStaticFiles(); 

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });

        app.Run(async (context) => 
        {
            //throw new Exception("Some proc err");
            await context.Response.WriteAsync("Hello World from Startup.cs (Configure) ");
        });
    }

更新对于潜伏者：更改 controller 中的签名解决了我的问题。 我知道这是一个基本的疏忽。

[HttpPost]
public object Post([FromBody] object value)
{
    var foo = "bar";
    return value;
}

此外，在编写时，我在 $.ajax 调用中弄错了dataType属性。 这是指返回值与请求中发送的数据负载。

我希望这对你也有帮助。

Answer 1

这里的问题是，当您发布 object 时，您的 controller 需要一个字符串。

您应该首先使用 Postman 进行测试，使用"9f14a706-e750-4b76-8ba5-78d890bbdf0d"作为有效载荷和 Content-Type：application/json。 如果可行，请尝试像这样更改您的 js：

data: JSON.stringify("9f14a706-e750-4b76-8ba5-78d890bbdf0d")

Answer 2

请写出：

/// NodesController.cs 
namespace INM.Controllers
{


  [Route("[controller]")]
   [ApiController]

public class NodesController : ControllerBase
{
    [HttpPost]
    [Route("api/[Controller]/[action]")]
    public void Post([FromBody] string value)
    {
         var foo = "bar";
    }

    [HttpPut("{id}")]
    [Route("api/[Controller]/[action]/:id")]
    public void Put(int id, [FromBody] string value)
    {
        var foo = "bar";
    }
}
}

在Startup.cs中：

services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                   builder => builder.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader());
        });

在startup.cs的Configure方法中：

  app.UseCors("CorsPolicy");

并添加：

app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
                endpoints.MapRazorPages();
            });

Answer 3

您正在传递包含 id 属性的 object，而在服务器端您仅从 body 接收字符串作为参数，因此更改您的代码以在 body 中具有一个字符串值，如下所示，看看它是否适合您

var item = "9f14a706-e750-4b76-8ba5-78d890bbdf0d";
$.ajax({
type: "POST",
accepts: "application/json",
url: '/nodes',
contentType: "application/json",
data: JSON.stringify(item),
error: function (jqXHR, textStatus, errorThrown) {
    console.error("Something went wrong!");
    console.error(textStatus);
    console.error(errorThrown);
},
success: function (result) {
    console.log('Testing');
}

});