使用fetch发送带AntiforgeryToken的POST请求返回400错误如何解决？

• 你的fetch调用写法存在核心错误：fetch的第二个参数是请求配置对象，你直接传入序列化后的JSON字符串，既没有指定请求方法为POST，也没有将数据放到body字段，更没有配置对应的请求头，后端无法正确解析请求参数。
• 默认ASP.NET Core的防伪令牌校验规则是从表单数据（FormData）中读取__RequestVerificationToken字段，你将令牌放到JSON请求体中时，后端默认不会从JSON里解析该字段，导致校验失败。
• 若未配置credentials，fetch请求可能不会携带对应域名下的防伪校验Cookie，而防伪校验需要Cookie中的令牌和请求携带的令牌成对匹配，缺失也会导致校验失败。

你在模态窗口中请求正常，是因为模态窗口的提交逻辑大概率使用了原生表单提交或FormData格式传参，符合默认的校验规则。

方案1：使用FormData传参（无后端改动，最便捷） #

直接将参数封装为FormData对象，适配默认校验规则，修改后的代码如下：

const formData = new FormData();
formData.append('__RequestVerificationToken', '@GetAntiXsrfRequestToken()');
formData.append('Id', id);
formData.append('ResolverGID', resolverGID);

return fetch(fetchURL, {
  method: 'POST',
  body: formData,
  credentials: 'include' // 确保携带校验所需Cookie
})
.then(async (response) => {
    return response.json();
})
.catch(() => {
    return false;
});

方案2：JSON传参+请求头传令牌（适合前后端分离JSON交互场景） #

前端修改： #

将令牌放到自定义请求头中，同时正确配置fetch参数：

return fetch(fetchURL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-RequestVerificationToken': '@GetAntiXsrfRequestToken()'
  },
  body: JSON.stringify({
    Id: id,
    ResolverGID: resolverGID
  }),
  credentials: 'include'
})
.then(async (response) => {
    return response.json();
})
.catch(() => {
    return false;
});

后端修改： #

在服务注册逻辑中配置防伪校验从指定请求头读取令牌，以ASP.NET Core为例：

builder.Services.AddAntiforgery(options => 
{
    options.HeaderName = "X-RequestVerificationToken";
});

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