FFFT

主にwebプロダクト開発に関連する話をつらつらと

IE11で画面を行き来するアプリケーションでAPIが呼ばれず画面の情報が古いまま表示される

タイトルのとおりの事象が発生。

IE11でreact, redux-sagaの構成のフロントアプリケーションで外部アプリケーションからのwindow.location.hrefでの遷移時になぜか最新の情報が画面にレンダリングされない、、、というところから調査スタート。
safari, chrome, firefox, edgeなど他のブラウザでは正常に動作する。

該当アプリの該当ページのcomponentWillMountで呼び出しているaction creatorがうまく動作してないのか、などだいぶ遠回りしてしまった。
結果、actionは正常に発行されてるにもかかわらずAPIは呼ばれてないというところからhttpクライアントまわりだなーとなる。
なお、httpクライアントはaxiosを使ってます。

調べていくとInternet Explorerは積極的にajax呼び出しをキャッシュするそうで。

axiosにはインターセプタ機能があるのでそれを使って呼び出しエンドポイントが一意になるように現在日時のパラメータを毎回付与させます。
実装例は下記。


下記の記事が大変参考になりました。
感謝!
s8a.jp