时间戳

首页 > 解决方案 > React Fetch POST 删除带有标题 Content-type = application/x-www-form-urlencoded 的字符

reactjs - React Fetch POST 删除带有标题 Content-type = application/x-www-form-urlencoded 的字符

问题描述

我正在使用react withfetch将图像发送到服务器。
我曾尝试使用 Content-type = application/x-www-form-urlencoded将我的数据传递给服务器，但它用空格替换特殊字符（即+变为 a space）。
我已将标题切换为，Content-type: multipart/form-data但这会引发错误

加载资源失败：服务器响应状态为 500（内部服务器错误）。

我已经为Content-typeas添加了一个边界boundary=abcdefg。
这并没有改变任何东西，我不确定我的边界是什么。
不可能通过关于边界的直接示例找到明确的答案。
我发送的数据是一个大字符串。
如果需要，我也可以发布。

这是导致问题的代码示例：

SaveTest4(data: string) {
    const options = {
        method: 'post',
        headers: {
            "Content-type": "multipart/form-data; boundary=abcdefg"
        },
        body: 'data=' + data
    }
    fetch('api/DataPoint/AddTest4', options);
}

标签： reactjsfetch

解决方案

根据您的部分分析，听起来您正在尝试发送 base64 编码的数据。内容类型application/x-www-form-urlencoded将导致服务器执行 URL 解码，这会将+内容正文中的每个实例替换为空格字符。

当您使用内容类型时multipart/form-data，服务器将失败并显示状态 500，因为您提供的数据不是正确构造的 MIME 文档。

我的通灵调试能力告诉我，您正在尝试将 base64 编码的文件发布到需要 JSON 文档的 ASP.NET MVC WebAPI 端点。您可能有一个如下所示的控制器方法：

[HttpPost("api/DataPoint/AddTest4")]
public void AddTest4([FromBody] string data) { ... }

如果您发送的内容类型为application/json，则此端点将需要一个如下所示的文档：

"{base64-encoded-data}"

请注意，数据周围有引号，因为带引号的字符串是正确的 JSON 文档。在这种情况下，您只需使用JSON.stringify()创建带引号的字符串，这将正确转义字符串中的任何引号。

如果您使用 发送application/x-www-form-urlencoded，则需要发送如下所示的文档：

data={base64-encoded-data}

但是，正如您所注意到的，您必须确保转义有效负载中的所有特殊字符；您可以使用 来执行此操作window.encodeURIComponent()，这会将每个“+”转换为“%2B”等。

如果您要上传到此端点的文件很大，那么使用FormData. 这将允许浏览器以块的形式将文件流式传输到服务器，而不是将其读入内存并在 JavaScript 中对其进行 base64 编码。

推荐阅读