Open5

Cloud FunctionsでPOSTするとCORSのエラーが返ってくる

YukiYuki

Cloud Functionsを使ってPOSTしようとしたら、CORSエラーに引っかかって時間を使ってしまったので、試したことと解決した方法のメモ。

  1. res.set("Access-Control-Allow-Origin", "*"); を追加
  2. fetchのHeadersの確認
  3. Preflight requestがされている
  4. req.rawBodyがあるらしい
YukiYuki

res.set("Access-Control-Allow-Origin", "*");

exports.myFunction = functions.https.onRequest(async (req, res) => {
    res.set("Access-Control-Allow-Origin", "*");

    res.send('Hello world');
});

Access-Control-Allow-Originの設定で解決と思ったらエラーが消えず、req.bodyの中身も取れていないようだったので、Preflight requestに対する処理を書く必要があることを知る。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
https://zenn.dev/ryo_kawamata/articles/cors-on-firebase-functions

YukiYuki

Preflight requestがされている

ブラウザから確認のリクエストがされるので、それに対する処理をしないとCORSエラーとして表示されるので、ここに辿り着くまで時間がかかった。OPTIONSというmethodのリクエストがされる。

https://developer.mozilla.org/ja/docs/Glossary/Preflight_request

YukiYuki

req.rawBodyがあるらしい

試してみる前に解決したので未確認。Parserの問題かと思ったが今回は違った。