MessagePackでエンコードしたバイト列をaxiosでクエリパラメータに含めて送りたかったのですが、ちょっとハマったので書き留めておきます。
環境
| バージョン | |
|---|---|
| node | 10.12.0 |
| axios | 0.18.0 |
| msgpack-lite | 0.1.26 |
目標
.js
const data = [{
bar: 'bar',
foo: 'foo',
}]
このようなObjectを送ることを考える。
https://msgpack.org/ で確認してみるとこのObjectはMessagePackによって以下のようなバイト列になる。
91 82 a3 62 61 72 a3 62 61 72 a3 66 6f 6f a3 66 6f 6f
ということはクエリパラメータはこんな感じになってくれると嬉しい。
...?data=%91%82%A3bar%A3bar%A3foo%A3foo
これはUTF-8でエンコードできるバイトはエンコードし、できないバイトは%を頭につけて16進数として出力するパーセント・エンコーディングです。
課題
まず書いたコードはこんな感じ。
.js
const data = {
bar: 'bar',
foo: 'foo',
}
const buf = msgpack.encode(data)
axios.get(
endpoint,
{ params: { data: buf } },
)
送られたクエリパラメータ
...?data=%7B%22type%22:%22Buffer%22,%22data%22:[130,163,98,97,114,163,98,97,114,163,102,111,111,163,102,111,111]%7D
BufferのObjectがそのままエンコードされてるっぽい…。
ということで以下のようにBufferをStringに修正してみる。
.js
const buf = msgpack.encode(data).toString()
axios.get(
endpoint,
{ params: { data: buf } },
)
送られたクエリパラメータ
...?data=%EF%BF%BD%EF%BF%BDbar%EF%BF%BDbar%EF%BF%BDfoo%EF%BF%BDfoo
ん？UTF-8でエンコードできない部分がなんかすごいことになってる。
調べてみるとエンコード失敗した時の文字列をさらにエンコードしようとしてこうなってしまうらしい…。
(参照)
解決策
これではリクエストを受け取った側でmsgpackとしてデコードできないのでどうしたものかと調べてみると、axiosではクエリパラメータのシリアライザをカスタマイズできるらしい。
実装したコードはこんな感じ。
.js
const buf = msgpack.encode(data);
axios
.get(
endpoint,
{
params: { data: buf },
paramsSerializer: (params) => { // シリアライザをカスタマイズ
let result = '';
for(let k of Object.keys(params)) {
if (result !== "") {
result += "&";
}
if (params[k] instanceof Buffer) { // Bufferだけエンコードが失敗しないようにする
let encodedData = '';
for (let value of params[k].values()) {
encodedData += '%' + value.toString(16);
}
result += k + "=" + encodedData;
} else {
result += k + "=" + encodeURI(params[k]); // Buffer以外は普通にエンコード
}
}
return result;
},
},
);
paramsSerializerを指定することによってシリアライザをカスタマイズできました。
内容としてはBufferに対してのみ単純なパーセント・エンコーディングを適用するようにしたものです。
まとめ
axiosは簡単なことは簡単にできながら、カスタマイズも細かくできるのがいいなと思いました。
他にいい方法があればコメントください！