Question

我正在将 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);
}

Answer 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编码。

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

1 个答案: