search
LoginSignup
0

More than 1 year has passed since last update.

【Node.js】Expressからaxiosを使ってバックエンドサーバーの画像を取得する際はresponseTypeにarrayBufferを指定する

はじめに

ルー大柴ぽいのが否めませんが表題の通りです。

訳あってBFF(Backend For Frontend)を採用する必要があり、クライアントサーバーとバックエンドサーバーでのやりとりで詰まったのでメモを残します。

※個人の見解です。明確なエビデンスを探し切ることができませんでした。根拠が乏しいので、真に受けないことをおすすめします。

背景

バックエンドサーバーから画像を取得しようとしたら次のようなレスポンスがクライアントサーバーに返ってきた。
image.png

結論

サーバー側でaxiosを使って画像をgetする時はresponseTypeをarrayBufferにする必要があるらしい。

引用①(axiosのドキュメントを引用している)

how does axios handle blob vs arraybuffer as responseType , From axios docs: // responseType indicates the type of data that the server will respond with // options are: 'arraybuffer', 'document', 'json', You can configure the type of the dataproperty using Axios' responseTypeobject. responseTypeis set to 'json', which means Axios will try to parse the response as JSON. However, that isn't correct if you're looking to, say, download an image using Axios. You can set responseTypeto 'arraybuffer'to get the response as an ArrayBuffer:

引用②

You can configure the type of the data property using Axios' responseType object. By default, responseType is set to 'json', which means Axios will try to parse the response as JSON. However, that isn't correct if you're looking to, say, download an image using Axios. You can set responseType to 'arraybuffer' to get the response as an ArrayBuffer:

サーバー側でaxiosを使っていて画像のやりとりをするときはresponseがarrayBufferで指定して受け取らないと文字化けしてしまう。とのことで、クライアント⇄サーバーの経験はあってもサーバー⇄サーバーは未経験でしたので解決までに時間がかかりました。次の記事は今回はまったのと同じ状況だったのと図解もされているので非常に参考になりました。

axiosでarrayBufferを使うとき

const axios = require('axios');
const res = await axios.get('https://images.unsplash.com/photo-1506812574058-fc75fa93fead', {
  responseType: 'arraybuffer'
});
const fs = require('fs');
fs.writeFileSync('./south-beach.jpg', res.data);

axiosでarrayBufferを使わないとき

const axios = require('axios');
const res = await axios.get('https://httpbin.org/get', { params: { answer: 42 } });
res.headers['content-type']; // 'application/json'
const axios = require('axios');
const res = await axios.get('https://httpbin.org/html');
res.headers['content-type']; // 'text/html; charset=utf-8'
typeof res.data; // 'string'
res.data; // '... <h1>Herman Melville - Moby-Dick</h1> ...'

さいごに

BFFで検索するとズッ友の方が出てくるあたりまだユースケースは少ないのかなと思いました。が、有名企業が採用していることもあるのでBFFを採用するところはこれから増えてくるような気がします。もしクライアントサーバーからaxiosを使って画像情報のやりとりをする際はarrayBufferを使うことを念頭に置くと良いと思います。

参考URL

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0