如何通过Axios在React+ASP.NET Core中正确保存数据到数据库

核心问题排查与修复 #

1. 字段拼写错误（最直接触发400的原因） #

React代码里提交的字段名和后端EventDto完全不匹配：

• React里的Desctription → 正确应为Description
• React里的date → 正确应为Date（后端模型字段是大写D的Date）
• 还有Desctiprion是低级拼写错误，需替换为实际要存储的描述内容

修复后的React请求数据：

const newEvent = {
    Description: '测试日程描述', // 修正拼写，替换为实际业务内容
    Date: arg.date.toISOString() // 转成ISO格式字符串，避免日期序列化异常
};

2. 后端路由与模型验证问题 #

你的EventController路由配置存在冲突，且未做模型绑定验证（400错误多数源于模型绑定失败）：

• 建议统一路由规则：将控制器上的[Route("[controller]")]改为[Route("api/[controller]")]，Post方法去掉单独的[Route("/api/events")]，仅保留[HttpPost]，此时接口路由为api/event
• 在Post方法开头添加模型验证，明确返回绑定错误信息：

[HttpPost]
public IActionResult Post(EventDto eventData)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState); // 返回具体的绑定错误，方便排查
    }
    // 原有数据库操作代码...
}

3. Proxy配置缺失关键内容 #

你的setupProxy.js有3处致命错误：

• 未引入createProxyMiddleware
• target变量未定义，需替换为你的ASP.NET Core服务地址（如http://localhost:5000）
• 未将代理中间件挂载到app实例上

修复后的setupProxy.js：

const { createProxyMiddleware } = require('http-proxy-middleware');

const context = ["/api/events"];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: 'http://localhost:5000', // 替换为你的后端服务地址
    secure: false,
    changeOrigin: true, // 新增该配置，解决跨域时的主机头匹配问题
    headers: {
      Connection: 'Keep-Alive'
    }
  });
  app.use(appProxy); // 挂载代理中间件到app
};

4. 日期序列化兼容性问题 #

FullCalendar的arg.date是JavaScript原生Date对象，直接序列化可能导致后端无法正确绑定到DateTime类型，转成ISO字符串（如上述React代码的toISOString()）即可解决该问题。

5. 数据库字段匹配检查 #

确认数据库表Event_Test的字段：

• Description字段类型为字符串（如nvarchar）
• Date字段类型为日期时间（如datetime或datetime2）
  确保与后端代码中的参数绑定逻辑一致。

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