Ajax POST请求在Windows浏览器正常但移动端浏览器失效的问题排查

问题描述 #

我编写了一个简单的Ajax请求，该请求在所有Windows系统的浏览器中都能正常运行，但在移动端浏览器（Android和iOS）中均无法工作，请问我哪里出错了？

前端代码：

$.ajax({ 
  type: 'POST', 
  url: '/System/Remove_Crons/' + '@Model.hexId' 
});

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

[HttpPost]
[Route("/System/Remove_Crons/{id}")]
public async Task<IActionResult> Remove_Crons(string id) {
  await Models.Cron.RemoveAllAsync();
  return Json(true);
}

最可能的原因：缺少XSRF（CSRF）令牌验证 #

这是ASP.NET Core中移动端Ajax POST失败的高频问题——Windows浏览器可能通过页面表单上下文自动携带了XSRF令牌，而移动端的纯Ajax请求没有手动添加该令牌，导致后端的Anti-Forgery验证直接拦截了请求。

ASP.NET Core默认会启用Anti-Forgery保护（尤其是在使用官方Razor Pages/MVC模板时），哪怕你的控制器没有显式标注[ValidateAntiForgeryToken]特性，全局配置也可能强制验证所有POST请求的XSRF合法性。

解决方案 #

1. 手动在Ajax请求中注入XSRF令牌

首先在你的Razor页面中添加Anti-Forgery令牌的隐藏输入：

@* 可以放在页面任意位置，建议靠近表单或页面顶部 *@
@Html.AntiForgeryToken()

然后修改Ajax请求代码，在请求头中携带令牌：

$.ajax({ 
  type: 'POST', 
  url: '/System/Remove_Crons/' + '@Model.hexId',
  // 新增：添加XSRF令牌到请求头
  headers: {
    "X-XSRF-TOKEN": $('input[name="__RequestVerificationToken"]').val()
  },
  // 可选：添加错误回调方便排查问题
  error: function(xhr, status, error) {
    console.log("请求错误状态码:", xhr.status);
    console.log("错误信息:", error);
  }
});

2. 验证后端Anti-Forgery配置（可选）

如果上述方法无效，可以检查Program.cs（旧版本为Startup.cs）中的XSRF配置，确保Header名称和前端一致：

builder.Services.AddAntiforgery(options =>
{
    // 指定Ajax请求要使用的Header名称，需和前端对应
    options.HeaderName = "X-XSRF-TOKEN";
});

3. 其他排查方向

• 确认请求是否到达后端：在控制器方法开头添加日志输出，验证移动端请求是否真的发送到了服务器：

  [HttpPost]
  [Route("/System/Remove_Crons/{id}")]
  public async Task<IActionResult> Remove_Crons(string id) {
    Console.WriteLine($"接收到请求，ID参数: {id}"); // 查看控制台日志
    await Models.Cron.RemoveAllAsync();
    return Json(true);
  }
  

• 检查jQuery版本兼容性：如果使用的是过于老旧的jQuery版本，可能在移动端浏览器存在API兼容问题，建议升级到稳定的最新版本。
• 核查Cookie策略：如果站点使用HTTPS，确保Cookie的Secure属性配置正确，移动端浏览器对HTTPS环境下的Cookie策略限制更严格。

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