梶さん現在開発中している自社サービスでは、出品者情報を登録する際に 郵便番号と住所を入力してもらっているのですが。。。。。。。
入力の簡略化のため、郵便番号から住所を出力してくれるAPIを使っていましたが、Safari環境で正しい郵便番号を入力しても動作しない不具合が発生しました。
ちなみに、Chrome, Edgeでは動作しています。
無事に解決したので、対応方法を残しました。
目次
SafariでAPIが叩けない：原因
こちらのページによると、API通信時のキャッシュクリアがSafariだと自動で行ってくれないためNetworkエラーが返ってくるとのこと（よくわからない）
下記のようにキャッシュさせないよう、時間のパラメータを追加して渡すと良いとのことですが、失敗。。
axios({
method: ‘get’,
url: url + ‘?nocache=’ + new Date().getTime(), // Safari fix
withCredentials: true
))
.then(…
method: ‘get’,
url: url + ‘?nocache=’ + new Date().getTime(), // Safari fix
withCredentials: true
))
.then(…
他にもCROSやAccess-Control-Allow-OriginなどSafari + axiosだと色々とお作法が合わないらしいです。
ということで、XMLHttpRequestなaxiosとは異なるfetch APIを使えばどうかと気付く。
SafariでAPIが叩けない：対応
axiosの部分をfetch APIに書き換えたらSafariでも動きました。
こんな感じです。
fetch(endpoint)
.then(response => response.json())
.then((data) => {
…
})
.catch ((e) => {
…
})
.then(response => response.json())
.then((data) => {
…
})
.catch ((e) => {
…
})
