使用 Fetch API 发送 __RequestVerificationToken 并使用 [ValidateAntiForgeryToken] 操作接收

Question

我想通过fetch提交表单。控制器操作如下所示：

\n\n

[HttpPost("new")]\n[ValidateAntiForgeryToken]\npublic JsonResult NewUser(NewUserViewModel user)\n{\n    // code...\n}\n

\n\n

如您所见，我正在使用 ValidateAntiForgeryToken。\n在客户端，我发现此 jQuery 代码有效：

\n\n

$.ajax({\n    url: window.location.pathname,\n    type: \'POST\',\n    data: {\n        Id: "1",\n        UserName: "ajax",\n        Password: "ajax",\n        ConfirmPassword: "ajax",\n        FullName: "ajax",\n        Email: "ajax@ajax.is",\n        Client: "ajax",\n        Roles: ["ajax"],\n        __RequestVerificationToken: document.querySelector(\'[name=__RequestVerificationToken]\').value\n    },\n    success: function (response) {\n        alert(\'T\xc3\xb3kst\');\n    },\n    error: function () {\n        alert(\'t\xc3\xb3kst ekki\');\n    }\n});\n

\n\n

但我想使用 fetch API 所以我做了这个尝试：

\n\n

let response = await fetch(window.location.pathname, {\n    method: \'POST\',\n    body: {\n        Id: "1",\n        UserName: "fetch",\n        Password: "fetch",\n        ConfirmPassword: "fetch",\n        FullName: "fetch",\n        Email: "fetch@fetch.is",\n        Client: "fetch",\n        Roles: ["fetch"],\n        __RequestVerificationToken: document.querySelector(\'[name=__RequestVerificationToken]\').value\n    }\n});\n

\n\n

然后在下面处理响应。\n我本以为 fetch 调用与 $.ajax 调用相同，但它不起作用。

\n\n

$.ajax 调用一直进行到操作，但 fetch 调用收到 400 错误。\n如果我从操作中删除 [ValidateAntiForgeryToken]，则 fetch 调用会起作用。

\n\n

有谁知道缺少什么，以便我可以使用 fetch 成功发布此内容？

\n

Answer 1

这就是我让它发挥作用的方法。

我在 Startup.cs 中添加了这一行：

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddAntiforgery(x => x.HeaderName = "X-ANTI-FORGERY-TOKEN");

    ...
}

然后我在获取请求的标头中添加了“X-ANTI-FORGERY-TOKEN”：

let response = await fetch(form.action, {
        body: JSON.stringify(this.Json),
        method: form.method,
        headers: {
            "X-ANTI-FORGERY-TOKEN": document.getElementsByName("__RequestVerificationToken")[0].value,
            "Content-Type": "application/json",
            "Accept": "application/json"
        }
    });

现在它就像一个魅力。