【Angular2】HttpClientでgetしたときの挙動がおかしい

最近仕事でAngularを使っているのですが、HttpClientのgetで想定と違うデータが取得される問題が発生した。

問題調査

IE、Firefox、Chromeで挙動を確認したが、どうもIEでのみ発生している模様。
さらに色々試してみると、IEでも開発者ツールを開いている場合は発生しない。

ということでIEの挙動について少し調べてみたところ、IE特有の挙動として「Ajaxの通信内容までキャッシュしてしまう」というのがあるらしい。
HttpClientの通信はAjaxを使っているようなので、今回の問題はこれが原因で間違いなさそう。

対処方法

自分の場合はここを参考にして、ヘッダーを作成する際、以下の指定をすることでキャッシュを回避した。

    headers = new Headers({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache'
    });

他にも、インターセプターを使うとか、paramにタイムスタンプを設定するとか、getじゃなくてpostを使うとかで回避できるみたいです。
(後者の2つは綺麗じゃないのであまりオススメはしませんが…)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする