asp net core 导致 Fetch 错误：TypeError

Question

我使用 Razor Pages 在 asp net core 上编写应用程序。在阅读此页面“https://learn.microsoft.com/ru-ru/aspnet/core/security/anti-request-forgery?view=aspnetcore”后，我长时间思考如何处理 POST 请求（razor 页面中的 OnPost） -8.0”，我为 js 添加了安全令牌，然后开始处理 POST 请求，但现在来自服务器的响应导致错误 Fetch: TypeError。 我想我错过了一些重要的事情，但我不明白是什么。 如果我开始使用“app.Map”处理请求，一切正常，没有问题。

UDP：FireFox 写入 - 网络响应的 Content-Length 标头超出响应正文。我如何在我的代码中修复它？

我的工作代码：

app.Map("/FormResult/GetRes", HandleMapFormRes);

static void HandleMapFormRes(IApplicationBuilder app)
{
    string text = string.Empty;
    app.Run(async context =>
    {

        if (context.Request.Method == "POST")
        {
            try
            {
             /* .......
              .......
              .......
              ....... */

                JsonFormToClient jsonFormToClient = new JsonFormToClient();
                jsonFormToClient.Blockinfo = results;
                jsonFormToClient.CountOfBlocks = c;
                string ResponceJson = JsonConvert.SerializeObject(jsonFormToClient);

                await context.Response.WriteAsJsonAsync(ResponceJson);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }

    });
}

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');
            }
            var a = response.json();
            return a;
        })
        .then(jsonData => {
            a = JSON.parse(jsonData);

            for (let i = 0; i < a.CountOfBlocks; i++) {
                AddNewBlock(a.Blockinfo[i].Id_in_html);
                drawnow(a.Blockinfo[i]);
            }
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}

如果我使用 Razor Page (OnPost) 处理此问题，响应将会中断

Answer 1

首先，要将 POST 请求发送到您尝试获取的同一 URL (pathToPage)，请使用 get 函数发布到您尝试获取的同一页面，这种情况并不常见。一般来说，API 端点会收到 POST 请求。

第二次重用和重新声明变量会令人困惑并且容易出错。

你可以试试这个：

function drawChart(pathToPage, token) {

  var htmlContent = document.documentElement.innerHTML; 
  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 => {
      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);
  });
}