概要
自分はサーバサイドをCloud runにてPython(Flask)、クライアントサイドはFirebaseにてJavascript(Vue.js)で開発しています。pythonではFirestoreのデータの読み書きを主に行っています。このとき、以下の二つの課題に当たってしまいました。
- GETリクエストしているのに、OPTIONSリクエストしている（ブラウザにて確認）
- GETリクエストがCloud runに届いていないが、レスポンスが返ってくる。このとき、PUTなどでFirestoreの内容を変更していても、GETリクエストのレスポンスが以前のFirestoreの内容になっている。
本記事は、これらの原因と対策について示します。
「1.」について
1については、OPTIONSリクエストはプレフライトリクエストと言い、単純リクエストではない場合、CORS プロトコルが理解されているかどうかを確認する CORS リクエストであるらしいです。これはクライアント側のリクエスト設定を見直すと飛ばなくすることが出来ます（REST APIの時、Authrizationヘッダがある場合があるため、飛んでしまうことが多いかもしれない）。プレフライトリクエストについては、以下のサイトを参考にしてください。結局これは特に問題ではなかったので、ここまで。
- オリジン間リソース共有 (CORS)：https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
「2.」について
こちらは、HTTPキャッシュが原因となっています。サーバサイドでレスポンス生成した際、自分はHTTPキャッシュに係る「Cache-controlヘッダ」を設定していなかったことが原因でした。これにより、本来Cloud run側にリクエストがいかず、FirebaseにあるHTTPキャッシュがクライアントサイドにレスポンスされていました。deploy後の1回目のGET通信は問題ないですが、その後はFirestoreの内容を変更しても、2回以降のGET通信は1回目の内容と同じものとなってしまいます。
- HTTP キャッシュ：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=ja
- HTTP キャッシュ(MDN web docs)：https://developer.mozilla.org/ja/docs/Web/HTTP/Caching
おわりに
もしかしたらweb屋さんの常識過ぎるためか、あまりそれっぽい記事はありませんでしたので、備忘録として記述しました。