【Firebase】Cloud FunctionsのCORSエラーを回避する方法

JavaScript

2020.08.08

この記事は約2分で読めます。

Google のクラウドサービスの1つであるFirebase functionsでExpressでAPIを作ったので、それをAngularで作ったフロント側から呼び出そうとしたところCORSエラーに遭遇したのでその解決法を書いておく。

cloudfunctionsのCORSエラーの解消法

結論から行くとcloudfunctionsにアップロードしているexpress製のAPIアプリ上でCORS設定をしてあげるだけ。

具体的にはそれ用のライブラリがあるのでインストールして呼び出すだけです。

ライブラリの詳細→https://github.com/expressjs/cors

# CORSをインストールする
$ npm install cors

インストールできたらindex.jsに以下のように追記します。

<index.js>

const functions = require("firebase-functions");
const express = require("express");
var cors = require("cors"); //これを追加！
const app = express();
app.use(cors());//これを追加！

app.get("/", (req, res) => {
  res.send(JSON.stringify('value':'hello world!'));
});

これでExpressで設定しているAPIの全ルートでCORSが許可されるので、別のアプリケーション上からAPIを呼び出すことが可能になります。