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

【问题标题】：React Fetch POST removes characters with header Content-type = application/x-www-form-urlencodedReact Fetch POST 删除带有标题 Content-type = application/x-www-form-urlencoded 的字符
【发布时间】：2018-11-30 20:15:09
【问题描述】：

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

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

我已将Content-type 的边界添加为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);
}

【问题讨论】：

你有没有试过类似的东西：body: 'data=' + encodeURIComponent(data)

标签： reactjs fetch

【解决方案1】：

根据您的部分分析，听起来您正在尝试发送 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 编码。

【讨论】：