もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

Apacheでcss・js等除くAjaxのみキャッシュを無効にする

とあるWEBアプリでAjax周りで不具合が出た

調べてみるとよくあるIEだけの現象

ChromeFirefoxでは問題ないが、IEだけAjaxのキャッシュが使われ、データが古いまま

GETクエリに時刻文字列のようなユニークキーを追加したり、Angularの設定で「If-Modified-Since」を明示的に設定してもIEさんのキャッシュは頑張ってくれていた・・・

(╬⓪益⓪)なんでじゃー

Javascriptで頑張るのは諦めて、以下のサイトを参考に、Apacheの設定を追加してキャッシュを無効化した

ameblo.jp

↓その時の設定

FileEtag None
RequestHeader unset If-Modified-Since
Header set Cache-Control no-store

この設定の場合、すべてに対してキャッシュ無効にする

css・js・png等はキャッシュしてほしい・・・

css・js・png等以外はキャッシュしない」ようにApacheの設定を色々試したみたがうまく動作しなかった


失敗その1

<FilesMatch "^\.(js|pdf|ico|gif|jpe?g|png|css|html|xml)$"> 
  FileEtag None
  RequestHeader unset If-Modified-Since
  Header set Cache-Control no-store
</FilesMatch>


失敗その2

<FilesMatch "\.(?!js|pdf|ico|gif|jpe?g|png|css|html|xml)$"> 
  FileEtag None
  RequestHeader unset If-Modified-Since
  Header set Cache-Control no-store
</FilesMatch>


失敗その1・失敗その2で「css」だけ除外して、「css」が毎回問い合わせされるかfiddlerで確認したところ、期待通りの動作にならなかった・・・

アプローチを変えて、とりあえず問答無用でキャッシュを無効化し、css・js・png等のファイルのアクセスの場合、再度キャッシュを設定するようにした

その時の設定はコチラ↓

FileEtag None
<IfModule mod_headers.c>
  RequestHeader unset If-Modified-Since
  Header set Cache-Control no-store

  <FilesMatch "\.(js|pdf|ico|gif|jpe?g|png|css|html|xml)$"> 
    Header set Cache-Control "max-age=86400"
  </FilesMatch>
</IfModule>


「<IfModule mod_headers.c>」は「モジュールが無い!」で怒られたくないので保険のため追記

FilesMatchで、静的ファイルのアクセスの場合、キャッシュの再設定を行っている

動作確認でcssを削除したところ、cssだけ毎回問い合わせされているのは確認できた

不具合も出てないみたいなので、これでいいのだー(多分)

ただ、正規表現の否定でうまく設定できないのが解せない・・・

書き方が悪いのかしら?