事の発端

IaaSのウェブアプリを作成しています。(私が担当しているのはフロントのみ)
オブジェクトストレージ機能を作成しました。
オブジェクトストレージ自体の仕様はOpenStackです。

一応仕様上は5GBまでオブジェクト作成可能なのでブラウザから作ってみたら、
作成自体はできたけど、そのオブジェクトの詳細情報を参照するページを開設するとエラーが発生する。

XHRには axiosを使用していて、今回落ちていたのもaxiosだった。
XHRのメソッドはHEAD。
content-lengthはなぜかそのオブジェクトのサイズ。
（サーバー側は私が関知できない・・・）

IE11が表示するエラーメッセージは「算術結果が32ビットを超えています」。
そのエラーメッセージをググっても一つの情報も出てこないばかりか、公式のMSすら解説を用意してない

というわけで、IEと私との戦いが始まりました
エラー箇所はレスポンスペイロードを参照するところ。

< axiosのxhr.jsファイル>


var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
//　以下の一行でこける・・・
var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
      var response = {
        data: responseData,
        // IE sends 1223 instead of 204 (https://github.com/mzabriskie/axios/issues/201)
        status: request.status === 1223 ? 204 : request.status,

なぜ？

メソッドはHEADを投げていたので、ペイロードはもちろん空です。
32ビットを超えるわけない。
しかも、発生条件はある程度大きいオブジェクトの時だけ・・・
エラーが発生していた箇所は、XHRをインスタンス化してリクエストした結果の中身を参照しているだけだからaxiosが原因の可能性も薄い・・・
(ただのXHRを動作させているだけで、axiosが特別な動きをしている箇所ではなかった)

原因

原因はXMLHttpRequest.responseTypeでした。
ここを参照してください。

responseTypeがarraybufferかdocumentかblobのどれかだとエラーが発生しなくなります。

おそらく、content-lengthが大きい数字だからどうせレスポンスペイロード参照しても大きすぎるでしょって感じで、エラーを吐き出しているものと思われる。
だから、ペイロードが空でもエラーがでる。(METHODはHEADなのに)

じゃあなぜresponseTypeを変えるとエラーが発生しないのかというと、
arraybufferとかは大きいペイロードが来ることが予想されるから、content-lengthがある程度大きくてもエラーが発生しないようになっている。。。
とか予想したけど、あってるかはわからない。

丸一日消えるくらい、めちゃくちゃ大変だった