在 Chrome 中无法查看 multipart/form-data 响应的完整细分-解网

问：

这个问题都源于试图理解为什么我无法在 rails 中获得正确的文件 MimeType。我发送的每个文件，csv，pdf等...返回类型。application/octet-stream

因此，我正在检查是否为上传的每个文件设置了我的文件。但是，在检查我的 Chrome 开发人员时，我看到的内容类型是：Content Type

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryVeLZZi3BHlOBVxuv

这似乎是我期望看到的截断版本，例如从 w3 开始：

   Content-Type: multipart/form-data; boundary=AaB03x

   --AaB03x
   Content-Disposition: form-data; name="submit-name"

   Larry
   --AaB03x
   Content-Disposition: form-data; name="files"
   Content-Type: multipart/mixed; boundary=BbC04y

   --BbC04y
   Content-Disposition: file; filename="file1.txt"
   Content-Type: text/plain

   ... contents of file1.txt ...
   --BbC04y
   Content-Disposition: file; filename="file2.gif"
   Content-Type: image/gif
   Content-Transfer-Encoding: binary

   ...contents of file2.gif...
   --BbC04y--
   --AaB03x--

我发送表单数据的方式的一些伪代码：

const formData = new FormData()
files.map(file => formData.append('file', file)

axios.post('https://example.com', formData)

我可以看到有效负载中发送的二进制文件值，所以我只是想更好地了解正在发生的事情，以及最终为什么我无法为发送的文件获取正确的 MIME 类型。

JavaScript ReactJS Ruby-on-Rails 表单

检查响应类型：确保您期望来自服务器的二进制响应。如果在 AJAX 请求中使用 responseType： 'blob'，请确保服务器实际使用二进制 blob 进行响应。
正确处理响应：确保在 JavaScript 代码中正确处理响应。应以 Blob 的形式访问响应，然后对其使用 arrayBuffer 方法。下面是如何做到这一点的示例：

const formData = new FormData();
files.map(file => formData.append('file', file));

$.ajax({
    url: 'https://example.co',
    method: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        // Do something
    },
    error: function(error) {
        // Handle errors
    }
});

Content-Type 标头：确保服务器为响应设置正确的 Content-Type 标头。如果您期望二进制响应，它应该类似于“application/octet-stream”或其他适当的二进制类型。
检查后端：确保服务器端代码正确处理 POST 请求并使用预期数据进行响应。服务器必须正确格式化和发送响应，这一点很重要。
检查 CORS 问题：如果服务器位于其他域中，则可能会遇到跨域资源共享（CORS）问题。确保您的服务器配置为正确处理 CORS，并且您的客户端代码未被浏览器的同源策略阻止。
更新 jQuery：有时，此类问题在较新版本的 jQuery 中得到解决。确保您使用的是最新版本的 jQuery。

0赞 Jessica 11/8/2023 #2

昨天我一定是在 1 轨道上，但我终于找到了。它位于有效负载中。🤦 在这里留下这条消息，以防其他人和我一样困惑。

上一个：无法使用 bcrypt-ruby 和 has_secure_password 保存密码

下一个：Bootstrap3：有没有一种简单的方法可以在鼠标下触发下拉菜单？

在 Chrome 中无法查看 multipart/form-data 响应的完整细分

Can't see full breakdown of multipart/form-data response in Chrome

评论