将“原始”有效负载发送到 Axios答案

【问题标题】：Send "raw" payload to Axios将“原始”有效负载发送到 Axios
【发布时间】：2017-12-17 10:15:41
【问题描述】：

如何将原始负载/请求正文发送到 Axios？

我试图调用的端点期望请求正文只是一个字符串，它将被收集并使用。

如果我尝试将一个字符串传递给axios.post() 以获得requestBody，它会将其转换为一个没有值的对象 ({ "this+is+my+message": "" }) 并最终得到像 "this+is+my+message=" 这样的解析。

我检查了文档，但找不到任何似乎有效的选项。 transformRequest 似乎是最明显的，但它在字符串中发送，我发送了字符串（字面意思为d => d），但它似乎仍然将其转换为无价值的 JSON 对象。

【问题讨论】：

标签： javascript axios

【解决方案1】：

由于我遇到了类似的问题，所以我想提供一个额外的答案。我正在加载一个图像文件（来自 <input type="file"> 元素）并使用 axios 将其发送到服务器 - 但作为原始正文而不是将其包装在 multipart/form-data 请求中。

似乎在原始数据的情况下，如果数据以ArrayBuffer 提供，axios 效果最好。这可以实现，例如使用以下代码片段（ES6）：

  const myFile = getMyFileFromSomewhere()
  const reader = new FileReader()
  reader.onload = () => {
    const result = reader.result
    const headers = {
      'Content-Type': file.type,
      'Content-Disposition': 'attachment; filename="' + file.name + '"'
    }
    axios.post('/upload', result, { headers: headers })
  }
  reader.readAsArrayBuffer(myFile)

（以这种方式使用Content-Type 标头有点不标准，但在我的情况下仅用作传输原始文件名的方式）

见：

https://github.com/axios/axios#request-config - data 的描述 https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer

【讨论】：

【解决方案2】：

事实证明，如果我将Content-Type 标头设置为text/plain，它不会将其转换为 JSON 或表单数据，而是按我的意愿发送。

axios.post('/my-url', 'my message text', {
  headers: { 'Content-Type': 'text/plain' }
});

【讨论】：