ASP.NET Razor Pages前端传地图缩放级别至后端报400错误

核心问题分析 #

400 Bad Request + "SyntaxError: Unexpected end of JSON input"，结合后端OnPostUpdateZoom未触发，本质是前端请求不符合后端的解析要求，导致请求被提前拦截，未进入Action处理逻辑。

逐一排查修复 #

1. 校验Fetch请求的JSON序列化与请求头 #

前端发送数据时必须确保：

• 用JSON.stringify()将数据转为合法JSON字符串，不能直接传对象
• 设置Content-Type: application/json请求头，告诉后端接收的是JSON格式
  示例代码：

map.on('zoomend', () => {
  const zoomLevel = map.getZoom();
  fetch('/YourPage/UpdateZoom', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
    },
    body: JSON.stringify({ zoomLevel: zoomLevel })
  })
  .then(response => response.json())
  .catch(error => console.error(error));
});

2. 后端Action需正确配置参数绑定 #

ASP.NET Core Razor Pages的POST Action必须明确指定从请求体读取JSON：

• 定义匹配前端数据的模型类：

public class ZoomModel
{
    public int ZoomLevel { get; set; }
}

• Action方法添加[FromBody]属性：

public IActionResult OnPostUpdateZoom([FromBody] ZoomModel model)
{
    // 处理缩放级别逻辑
    return new JsonResult(new { success = true });
}

如果未加[FromBody]，后端会尝试从URL参数读取数据，而非请求体，导致无法解析JSON，直接返回400。

3. 确保Fetch使用POST方法 #

后端OnPostUpdateZoom对应HTTP POST请求，fetch默认是GET，必须显式设置method: 'POST'，否则请求方式不匹配，后端不会触发该Action。

4. 处理Razor Pages的防伪造Token验证 #

ASP.NET Core Razor Pages默认启用防伪造验证，前端未携带Token会被拒绝请求：

• 在.cshtml页面中添加Token：

@Html.AntiForgeryToken()

• 在Fetch请求的headers中带上该Token（已包含在第1点的示例代码中）

5. 检查请求Payload的完整性 #

在浏览器开发者工具的Network面板中，查看对应POST请求的Payload：

• 确认JSON内容完整，无语法错误（比如缺失括号、逗号）
• 如果Payload为空，说明前端未正确传递数据，需检查zoomLevel是否正确获取

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