Send “raw” payload to Axios

Question

How can I send a raw payload/request body to Axios?

The endpoint I\'m trying to call expects the request body to just be a string which it\'ll scoop up and use.

Answer 1

As I dropped here having a similar problem, I'd like to supply an additional answer. I am loading an image file (from a <input type="file"> element) and sending it to the server using axios - but as raw body as opposed to wrapping it in a multipart/form-data request.

It seems that in the case of raw data, axios works best if the data is supplied in an ArrayBuffer. This can be achieved e.g. using the following code fragment (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)

(using the Content-Type header in this way is slightly non-standard but in my case only used as means of transporting the original file name)

See:

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

Answer 2

It turns out, if I set the Content-Type header to text/plain, it won't convert it to JSON or form data and will send it as I want.

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