#初めに

題材がピンポイントですが、自分のように知らないで引っかかってしまう人向けの記事です。
画像データに限らず、バイナリデータを取得して送信したいのなら当てはまる話だと思います。

##内容

axiosを使ってexpressにhttpリクエストした際に、axiosのresponseTypeにarrayBufferを指定して、expressでarrayBufferを返すようにしたのだけど、なぜかちゃんと帰ってこない！
と思ったら、express側ではbufferを返せばいいみたいです。

以下に、一例としてコードの一部を載せておきます。

##フロント側

apiにリクエストを送ります

index.js

import axiosBase from "axios";
import axiosConfig from "./axios.config.js";
const axios = axiosBase.create(axiosConfig);

axios
  .get('/api')
  .then((response) => {
    const blob = new Blob([response.data], { type: 'image/jpeg' });
    const iconUrl = URL.createObjectURL(blob);
  })
  .catch((err) => {
    console.log(err);
  });

↓設定ファイルです。

axios.config.js

module.exports = {
  responseType: 'arraybuffer' //ここでハマることもあるのでちゃんと設定する
};

##サーバー側

※s3で画像を取得した場合の例です

server.js

app.get('/api', (req, res) => {
  const params = {Key: 'key名', Bucket: 'Bucket名'};
  s3.getObject(params, (err, data) => {
    //自分はここでわざわざarrayBufferに変えて送ってしまっていました...
    res.send(data.Body);
  });
});

自分は、axiosでresponseTypeに'arraybuffer'って設定してるんだからarraybufferを返せばいいんでしょ？と、素人考えでarraybufferをexpress側から返してしまいました。

s3の場合は取得してそのまま返せばできました。

##参考URL
Stack Overflowにあった質問