Firebase FunctionsとGatsbyのCORS問題

Gatsbyで作った静的サイトでのお問い合わせフォーム送信にFirebase Functionsを用いて実装した際に、CORSエラーが出て無駄に詰まったので、解決策を残しておこうと思います。

結論

以下のどちらかで解決するはずです。

• レスポンスにset('Access-Control-Allow-Origin', '*')をセットする
• ブラウザのキャッシュをクリアする

軽く解説しておきます。

手段1：レスポンスにset('Access-Control-Allow-Origin', '*')をセットする

詳しくはこちらの記事をご参考いただきたいのですが、結論的には以下のようにすると良いみたいです。（Firebase functions側）

export const send = onRequest(async(req, res) => {
  res.set('Access-Control-Allow-Origin', '*')
  // 他の処理
})

手段2：ブラウザのキャッシュをクリア

各ブラウザの設定からキャッシュをクリアしてください。

自分の場合は、手段１を実行しても解決せず、なぜ解決しないのか途方に暮れていましたが、ブラウザを変えたらすんなりCORSエラーが消えていたので、そういうことかと。

まとめ

GatsbyとFirebase Hostingのサイト、キャッシュのせいで何かと深みにハマるので、気をつけたいところです。

以前にも別のことで詰まり、結局キャッシュだったってことがあったので、あるあるなんですかね。。。