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のサイト、キャッシュのせいで何かと深みにハマるので、気をつけたいところです。
以前にも別のことで詰まり、結局キャッシュだったってことがあったので、あるあるなんですかね。。。