使用JavaScript Fetch发送POST请求始终返回400状态码求助

你的POST请求返回400状态码且OnPostFetch从未执行，核心原因是ASP.NET Core Razor Pages默认强制要求POST请求携带防伪造令牌（Anti-Forgery Token），而你的Fetch请求未提供该令牌，导致验证失败直接返回400。以下是具体修复步骤：

1. 添加防伪造令牌到Fetch请求 #

Razor Pages会自动生成防伪造令牌，你需要在页面中获取该令牌并添加到请求头：

步骤1.1 在Razor页面（FetchDemo.cshtml）中生成令牌 #

在页面任意位置添加：

@Html.AntiForgeryToken()

这会生成一个隐藏的input元素，名称为__RequestVerificationToken。

步骤1.2 修改Fetch POST代码 #

更新JavaScript函数，获取令牌并添加到请求头：

async function FetchPost() {
    let data = { a: 1, b: 2 };
    let json = JSON.stringify(data);
    // 获取页面中的防伪造令牌
    const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
    try {
        const response = await fetch('/FetchDemo?handler=Fetch',
            {
                method: 'POST',
                credentials: 'same-origin', 
                headers: { 
                    'Content-Type': 'application/json',
                    'RequestVerificationToken': token // 新增防伪造令牌头
                },
                body: json
            });

        if (response.ok) {
            data = await response.json();
        } else {
            throw new Error(response.statusText); // 修正：JavaScript异常构造函数是Error而非exception
        }
    } catch (error) {
        data = 'Error fetching data:' + error;
    }
    return data;
}

2. （可选）绑定JSON请求体到模型 #

如果需要接收POST的JSON数据，需在OnPostFetch方法中添加[FromBody]特性指定从请求体绑定数据：

步骤2.1 定义数据模型 #

public class MyDataModel
{
    public int a { get; set; }
    public int b { get; set; }
}

步骤2.2 更新PageModel方法 #

public IActionResult OnPostFetch([FromBody] MyDataModel model)
{
    string data = model != null ? $"a={model.a}, b={model.b}" : "No data received";
    return new JsonResult(data);
}

3. （不推荐）临时禁用防伪造验证 #

如果仅用于测试，可通过特性临时禁用该方法的防伪造验证，但会降低安全性：

[IgnoreAntiforgeryToken]
public IActionResult OnPostFetch()
{
    string data = "";
    return new JsonResult(data);
}

额外注意点 #

• 原代码中throw new exception(...)是错误的，JavaScript中正确的异常构造函数是Error，修正后才能正确捕获异常信息。
• 确保你的Program.cs/Startup.cs中已启用Razor Pages服务（默认已启用）：

  builder.Services.AddRazorPages();
  

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