ASP.NET Core Razor Pages处理POST请求时出现Fetch: TypeError求助

核心问题分析 #

• 前端重复解析JSON：response.json()已将响应体解析为JavaScript对象，后续再调用JSON.parse(jsonData)会抛出TypeError，因为传入的不是JSON字符串。
• Razor Pages响应处理不规范：手动写响应输出会绕过框架的响应头管理，导致Content-Length等头信息异常，而app.Map场景下框架自动处理了这些细节。
• CSRF令牌验证的潜在配置问题：Razor Pages默认强制CSRF验证，需确保令牌传递和验证逻辑正确。

解决方案 #

1. 修复前端Fetch代码 #

移除重复的JSON.parse调用，直接使用response.json()返回的对象：

function drawChart(pathToPage, token) {
    var htmlContent = pathToPage;
    var formData = new FormData();
    formData.append('htmlContent', htmlContent);
    fetch(pathToPage, {
        method: 'POST',
        body: formData,
        headers: {
            "X-XSRF-TOKEN": token
        },
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json(); // 直接返回解析后的对象
        })
        .then(jsonData => {
            // 无需再JSON.parse，直接使用jsonData
            for (let i = 0; i < jsonData.CountOfBlocks; i++) {
                AddNewBlock(jsonData.Blockinfo[i].Id_in_html);
                drawnow(jsonData.Blockinfo[i]);
            }
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}

2. 规范Razor Pages OnPost方法实现 #

使用框架提供的JsonResult返回结果，让框架自动处理响应头：

public class YourPageModel : PageModel
{
    public async Task<IActionResult> OnPostAsync()
    {
        try
        {
            // 原业务逻辑，获取results和c
            // .......

            var jsonFormToClient = new JsonFormToClient
            {
                Blockinfo = results,
                CountOfBlocks = c
            };

            return new JsonResult(jsonFormToClient); // 框架自动序列化并设置响应头
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
            return StatusCode(500, "Server error");
        }
    }
}

3. 确保CSRF令牌验证正确 #

• 在Razor页面中添加@Html.AntiForgeryToken()生成令牌，或通过JavaScript从XSRF-TOKEN cookie中读取令牌（需配置Cookie策略允许JavaScript访问）。
• 确认Program.cs中未禁用Razor Pages默认的CSRF验证中间件。

关键说明 #

• Razor Pages的PageModel方法应返回IActionResult类型（如JsonResult、StatusCodeResult），而非手动操作HttpContext.Response，否则会破坏框架的响应处理流程。
• 前端response.json()是异步解析，返回的是Promise，直接返回后在后续then中即可使用解析后的对象，重复解析会导致类型错误，这也是Firefox提示响应体异常的诱因之一。

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