XHRのキャッシュ

javascript

仕事で生のXHR使ってリクエストを投げる機会があってハマった

GETメソッドでリクエストを投げる時にキャッシュが残っているとリクエストを送る代わりに以前のレスポンス内容を使用してしまうらしい。POSTの時は毎回リクエストを投げていたからなかなか気づけなくて困った。(これもブラウザ依存で例えばSafariだとキャッシュ読むらしいが)

let xhr = new XMLHttpRequest ();

// 中略
xhr.setRequestHeader('Cache-Control', 'no-cache')
xhr.setRequestHeader('Pragma', 'no-cache')
xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun1970 00:00:00 GMT')

重要なのはCache-Controlでこれは必須 PragmaはHTTP1.0の後方互換用らしい。 If-Modified-SinceはCache-Controlが効かないIE用で、キャッシュの期限が指定日時以降ならリクエストを送る。(古いIEだけかもしれんけど興味無くてこれ以上調べてない)

イマドキのやつはCache-Controlだけでいいんじゃないだろうか というか普通はjqueryとかaxiosとか使うからライブラリが良きに計らってくれる気がする

終わり