reactjs - 在 ASP.NET Core 中下载文件时抛出错误，状态码为 400

Question

我正在研究下载功能。当我在 localhost 上运行代码时，它运行完美，没有任何错误。但是当我将相同的代码上传到服务器时，它会Failed to load resource: the server responded with a status of 400 (Bad Request)在浏览器的控制台中返回错误。为了从服务器请求和获取响应，我使用了 Axios。我是 ASP.NET Core + ReactJS 技术堆栈的新手，并且是第一次使用 API，所以我很难找出这个错误的根本原因。

这是我从服务器请求数据的代码。

axios({
        method: 'POST',
        url: '/api/ImageFetch/ImageFetchPoint',
        responseType: 'blob',// important
        headers: {
            'Content-Type': 'application/json'
        },
        data: filepath
    }).then(function(response) {
        const url = window.URL.createObjectURL(new Blob([response.data]));

        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
    }).catch(error => {
        console.log("Status:", error.response.status);
        console.log("Data:", error.response.data);
    });

为了从服务器获取作为文件（任何扩展名）的响应，我使用了以下代码。

    [HttpPost("PanImageFunction")]
    [Route("api/[controller]/[action]")]
    public async Task<IActionResult> ImageFetchFunction([FromBody] ImageFetchRequest request)
    {
        var filePath = request.ImagePath;
        var filename = System.IO.Path.GetFileName(filePath);
        string path="unknownpath";
        try {
            if (filename == null)
                return Content("filename not present");

            path = Path.Combine(
                       Directory.GetCurrentDirectory(),
                       "RegistrationImages", filename);

        } catch(Exception ex) {
            new Logger().write(ex);
        }

        var memory = new MemoryStream();
        using (var stream = new FileStream(path, FileMode.Open))
        {
            await stream.CopyToAsync(memory);
        }
        System.Net.Mime.ContentDisposition cd = new System.Net.Mime.ContentDisposition
        {
            FileName = filename,
            Inline = false  // false = prompt the user for downloading;  true = browser to try to show the file inline
        };

        Response.Headers.Add("Content-Type", "multipart/form-data");
        Response.Headers.Add("Content-Disposition", cd.ToString());
        Response.Headers.Add("X-Content-Type-Options", "nosniff");

        memory.Position = 0;
        return File(memory, GetContentType(path), Path.GetFileName(path));
    }

    private string GetContentType(string path)
    {
        var types = GetMimeTypes();
        var ext = Path.GetExtension(path).ToLowerInvariant();
        return types[ext];
    }

    private Dictionary<string, string> GetMimeTypes()
    {
        return new Dictionary<string, string>
        {
            {".txt", "text/plain"},
            {".pdf", "application/pdf"},
            {".doc", "application/vnd.ms-word"},
            {".docx", "application/vnd.ms-word"},
            {".xls", "application/vnd.ms-excel"},  
            {".png", "image/png"},
            {".jpg", "image/jpeg"},
            {".jpeg", "image/jpeg"},
            {".gif", "image/gif"},
            {".csv", "text/csv"}
        };
    }

完整的代码在 localhost 上完美运行。但是当我将它上传到服务器上时，它会在浏览器的控制台上抛出 400 bad request 错误，如下图所示。

我查看了许多论坛和文章，但大多数与 ASP.NET 核心相关的文章都提供了与 Razor 页面相关的解决方案，而没有提供与 ReactJS 和 Axios 相关的解决方案。

我该如何解决这个错误？

标签： reactjsasp.net-coreaxios