React前端向ASP.NET Core后端POST数据报错如何解决

目标是实现前后端HTTP POST请求正常完成数据提交，以下是现有代码、配置及报错信息。

现有实现代码 #

前端React提交逻辑 #

点击提交按钮时触发的API调用代码：

const handleOnPreview = (e) => {
        e.preventDefault();
        setsubmittext(text);
        const ROOT_URL='https://localhost:7113/';
        axios.post(`${ROOT_URL}/api/demo-text`, text, {
            headers: { 'Content-type':'application/json'} 
        })
    }

后端ASP.NET Core控制器代码 #

public class HomeController: Controller
{
    private readonly ILogger<HomeController> _logger;

    public HomeController(ILogger<HomeController> logger)
    {
        _logger = logger;
    }

    public IActionResult Index()
    {
        return View();
    }

[HttpPost]
    [Route("/api/demo-text")]
    [EnableCors("AllowOrigin")]
    public HttpResponseMessage Post([FromForm] text text)
    {
        return new HttpResponseMessage()
        {
            Content = new StringContent("POST: Test message")
        };
    }
    
    public IActionResult Privacy()
    {
        return View();
    }
}

Startup.cs中间件配置 #

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
               
                app.UseHsts();
            }
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseCors();

            app.UseRouting();

            app.UseAuthorization();

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

报错截图 #

• 参数绑定方式不匹配：前端axios设置Content-Type为application/json，会将参数以JSON格式放在请求体中传递，但后端接口用[FromForm]标记参数，仅会从表单格式请求中读取值，无法接收JSON参数，直接触发400参数校验错误。
• 返回值类型不兼容：ASP.NET Core 不会自动序列化处理HttpResponseMessage类型返回值，直接返回该类型会将对象本身做JSON序列化输出，无法返回预期的字符串内容。
• CORS配置错误：接口标记使用名为AllowOrigin的CORS策略，但服务端未注册该命名策略，UseCors()调用也未指定策略名，跨域请求会被直接拦截。
• 前端缺少异常/响应处理：axios请求未编写响应、错误捕获逻辑，无法获取请求结果、定位异常。

后端代码修复 #

1. 先定义和前端传参结构匹配的请求模型，替换未定义的text参数类型：

// 请求模型字段名必须和前端传递的JSON属性名完全一致
public class TextInput
{
    public string Content { get; set; }
}

2. 修正接口的参数绑定特性、返回值类型：

[HttpPost]
[Route("/api/demo-text")]
[EnableCors("AllowOrigin")]
// 替换[FromForm]为[FromBody]接收JSON请求体，参数类型使用自定义模型
public IActionResult Post([FromBody] TextInput input)
{
    // 业务逻辑可通过input.Content获取前端传递的文本值
    return Ok("POST: Test message");
}

CORS配置修复 #

在Startup.cs的ConfigureServices方法中注册命名CORS策略，注意放在控制器服务注册之前：

public void ConfigureServices(IServiceCollection services)
{
    // 注册CORS策略
    services.AddCors(options =>
    {
        options.AddPolicy("AllowOrigin", policy =>
        {
            // 替换为前端项目实际访问地址，生产环境不要使用通配符*
            policy.WithOrigins("http://localhost:3000", "https://localhost:3000")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
    });
    services.AddControllersWithViews();
}

调整Configure方法中CORS中间件的位置和调用参数，必须放在UseRouting之后、UseAuthorization之前：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();
    // 指定使用的CORS策略名
    app.UseCors("AllowOrigin");

    app.UseAuthorization();

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

前端代码修复 #

补充请求响应、错误捕获逻辑，保证传参结构和后端模型匹配：

const handleOnPreview = async (e) => {
    e.preventDefault();
    setsubmittext(text);
    const ROOT_URL='https://localhost:7113/';
    try {
        // 传参结构和后端TextInput模型字段对应
        const res = await axios.post(`${ROOT_URL}/api/demo-text`, { Content: text }, {
            headers: { 'Content-Type':'application/json'} 
        })
        console.log('请求成功，返回结果：', res.data)
    } catch (err) {
        console.error('请求异常：', err)
    }
}

内容的提问来源于stack exchange，提问作者gourav kumar