メモブログ

技術的なことを書き連ねるブログ

IE11 で 非同期のHTTP通信がうまくいかない

こんな風に、 jsでfetchを使ってサーバーからのresponseの情報(今回の場合は時間)を取得したい時ありますよね。

  fetch(location.href)
    .then((response) => {
      if (response.ok) {
        console.log(response.headers.get('Date'))
        return
      }
      throw new Error('request failed')
    })
    .catch((err) => {
      console.log(err)
    })

ところが、IE11だけ、この

response.headers.get('Date')

がnullになってしまいました。

どうやら、IE11は、HTTP通信をキャッシュしてしまうらしく、 それで新たに「headers.get('Date')」が取得出来ないようです。 medium.com

  fetch(location.href,
    headers: { Pragma: 'no-cache' },
   )
    .then((response) => {
      if (response.ok) {
        console.log(response.headers.get('Date'))
        return
      }
      throw new Error('request failed')
    })
    .catch((err) => {
      console.log(err)
    })

fetchのオプションの所に、キャッシュさせない記述を することで無事データが取得できました。