Cloud Functions for FirebaseでCORSを有効にする

現在、Firebase向けの新しいCloud Functionsの使用方法を学んでいますが、AJAXリクエストを介して記述した関数にアクセスできないという問題があります。「 'Access-Control-Allow-Origin'がありません」というエラーが表示されます。これが私が書いた関数の例です：

exports.test = functions.https.onRequest((request, response) => {
  response.status(500).send({test: 'Testing functions'});
})

関数は次のURLにあります：https : //us-central1-fba-shipper-140ae.cloudfunctions.net/test

Firebase docsは関数内にCORSミドルウェアを追加することを提案していますが、試してみましたが、機能しません：https : //firebase.google.com/docs/functions/http-events

これは私がそれをした方法です：

var cors = require('cors');    

exports.test = functions.https.onRequest((request, response) => {
   cors(request, response, () => {
     response.status(500).send({test: 'Testing functions'});
   })
})

何が悪いのですか？これで何か助けていただければ幸いです。

更新：

Doug Stevensonの回答が役立ちました。（{origin：true}）を追加すると問題が修正され、最初は完全に見落としたものに変更response.status(500)する必要もありましたresponse.status(200)。

CORSの使用を示す、Firebaseチームが提供する2つのサンプル関数があります。

• 日付形式のタイムサーバー
• 認証を必要とするHTTPSエンドポイント

2番目のサンプルでは、​​現在使用している方法とは異なる方法でcorsを操作します。

また、サンプルに示すように、次のようにインポートすることを検討してください。

const cors = require('cors')({origin: true});

あなたはこのようにクラウド機能でCORSを設定することができます

response.set('Access-Control-Allow-Origin', '*');

corsパッケージをインポートする必要はありません

Typescriptでこれをやろうとしている人にとっては、これはコードです：

import * as cors from 'cors';
const corsHandler = cors({origin: true});

export const exampleFunction= functions.https.onRequest(async (request, response) => {
       corsHandler(request, response, () => {});
       //Your code here
});

しばらくしてからこれをググる人のために、もう1つの情報を追加します。firebaseホスティングを使用している場合は、リライトを設定して、たとえば（firebase_hosting_host）/ api / myfunctionのようなURLが（ firebase_cloudfunctions_host）/ doStuff関数。このように、リダイレクトは透過的でサーバー側であるため、corsを処理する必要はありません。

これは、firebase.jsonのrewritesセクションで設定できます。

"rewrites": [
        { "source": "/api/myFunction", "function": "doStuff" }
]

CORSソリューションは私のために働いていません...今までのところ！

他の誰かが同じ問題に遭遇したかどうかはわかりませんが、私が見つけた例から5つの異なる方法でCORSを設定しましたが、何も機能しないようでした。Plunkerを使用して最小限の例を設定し、それが本当にバグであるかどうかを確認しましたが、例は美しく実行されました。私は、Firebaseの機能ログ（Firebaseコンソールにあります）をチェックして、それが何かを教えてくれるかどうかを確認することにしました。CORS関連ではなく、ノードサーバーコードにいくつかのエラーがありました。デバッグすると、CORSエラーメッセージが表示されました。CORSに関係のないコードエラーがCORSエラー応答を返す理由はわかりませんが、それにより、間違ったウサギの穴をかなりの時間数だけダウンしました...

tl; dr-CORSソリューションが機能しない場合はfirebase関数ログを確認し、エラーがあればデバッグします

@Andreysの質問に少し答えます。

cors(req, res, cb)関数内でコールバックを呼び出す必要はないようです。そのため、コールバックにすべてのコードを埋め込むことなく、関数の上部にあるcorsモジュールを呼び出すだけで済みます。後でcorsを実装する場合、これははるかに高速です。

exports.exampleFunction = functions.https.onRequest((request, response) => {
    cors(request, response, () => {});
    return response.send("Hello from Firebase!");
});

最初の投稿で述べたように、corsを初期化することを忘れないでください。

const cors = require('cors')({origin: true});

これは役に立ちます。Express（カスタムURL）でfirebase HTTPクラウド機能を作成しました

const express = require('express');
const bodyParser = require('body-parser');
const cors = require("cors");
const app = express();
const main = express();

app.post('/endpoint', (req, res) => {
    // code here
})

app.use(cors({ origin: true }));
main.use(cors({ origin: true }));
main.use('/api/v1', app);
main.use(bodyParser.json());
main.use(bodyParser.urlencoded({ extended: false }));

module.exports.functionName = functions.https.onRequest(main);

書き換えセクションを追加したことを確認してください

"rewrites": [
      {
        "source": "/api/v1/**",
        "function": "functionName"
      }
]

それについて少しだけ発表しました：

https://mhaligowski.github.io/blog/2017/03/10/cors-in-cloud-functions.html

通常、Express CORSパッケージを使用する必要があります。これには、GCF / Firebase関数の要件を満たすために少しハッキングが必要です。

お役に立てば幸いです。

そこに私のような人がいる場合：クラウド関数と同じプロジェクトからクラウド関数を自分で呼び出したい場合は、firebase sdkを初期化してonCallメソッドを使用できます。それはあなたのためにすべてを扱います：

exports.newRequest = functions.https.onCall((data, context) => {
    console.log(`This is the received data: ${data}.`);
    return data;
})

この関数を次のように呼び出します。

// Init the firebase SDK first    
const functions = firebase.functions();
const addMessage = functions.httpsCallable(`newRequest`);

Firebaseドキュメント：https : //firebase.google.com/docs/functions/callable

SDKを初期化できない場合、ここに他の提案の本質があります。

• Firebaseホスティングを使用し、デフォルトの場所でホストする場合は、rewritesを選択します。https：//firebase.google.com/docs/hosting/full-config#rewrites
• または、推奨されるkrishnazdenのようなCORSを使用します：https ://stackoverflow.com/a/53845986/1293220

「cors」ライブラリをインポートせずにcorsを有効にする方法が見つかりました。またTypescript、Chromeバージョン81.0 でも動作し、テストされています。

exports.createOrder = functions.https.onRequest((req, res) => {
// browsers like chrome need these headers to be present in response if the api is called from other than its base domain
  res.set("Access-Control-Allow-Origin", "*"); // you can also whitelist a specific domain like "http://127.0.0.1:4000"
  res.set("Access-Control-Allow-Headers", "Content-Type");

  // your code starts here

  //send response
  res.status(200).send();
});

価値があることについては、に渡ったときに同じ問題が発生していappましたonRequest。この問題は、firebase関数のリクエストURLの末尾のスラッシュにあることがわかりました。Expressが探していました'/'が、関数の末尾にスラッシュがありませんでした[project-id].cloudfunctions.net/[function-name]。CORSエラーは偽陰性でした。末尾にスラッシュを追加すると、期待した応答が得られました。

私は私のリクエストで承認を持っているので、この方法のみが私のために機能します：

exports.hello = functions.https.onRequest((request, response) => {
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Credentials', 'true'); // vital
if (request.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    response.set('Access-Control-Allow-Methods', 'GET');
    response.set('Access-Control-Allow-Headers', 'Content-Type');
    response.set('Access-Control-Max-Age', '3600');
    response.status(204).send('');
} else {
    const params = request.body;
    const html = 'some html';
    response.send(html)
} )};

corsプラグインを使用しない/使用できない場合setCorsHeaders()は、ハンドラー関数で最初に関数を呼び出すこともできます。

また、返信するときは、responseSuccess / Error関数を使用します。

const ALLOWED_ORIGINS = ["http://localhost:9090", "https://sub.example.com", "https://example.com"]


// Set CORS headers for preflight requests
function setCorsHeaders (req, res) {
  var originUrl = "http://localhost:9090"


  if(ALLOWED_ORIGINS.includes(req.headers.origin)){
    originUrl = req.headers.origin
  }

  res.set('Access-Control-Allow-Origin', originUrl);
  res.set('Access-Control-Allow-Credentials', 'true');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET,POST','PUT','DELETE');
    res.set('Access-Control-Allow-Headers', 'Bearer, Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  }
}

function respondError (message, error, code, res) {
  var response = {
    message: message,
    error: error
  }
  res.status(code).end(JSON.stringify(response));
}


function respondSuccess (result, res) {
  var response = {
    message: "OK",
    result: result
  }
  res.status(200).end(JSON.stringify(response));
}

Firebaseアプリをローカルでテストしている場合は、関数をlocalhostクラウドではなくポイントする必要があります。デフォルトでは、firebase serveまたはfirebase emulators:startWebアプリで使用するときに、関数がlocalhostではなくサーバーを指すようにします。

以下のスクリプトを、firebase initスクリプトの後にhtmlヘッドに追加します。

 <script>
      firebase.functions().useFunctionsEmulator('http://localhost:5001')
 </script> 

コードをサーバーにデプロイするときは、必ずこのスニペットを削除してください。

変更trueする"*"ことは私にとってトリックをしたので、これは次のようになります：

const cors = require('cors')({ origin: "*" })

一般に、この方法でこの応答ヘッダーを設定するため、このアプローチを試しました。

'Access-Control-Allow-Origin', '*'

これにより、すべてのドメインがエンドポイントを呼び出すことができるため、安全ではないことに注意してください。

さらに、ドキュメントで詳細を読むことができます：https : //github.com/expressjs/cors

Expressを使用していない場合、または単にCORSを使用したい場合。次のコードは解決に役立ちます

const cors = require('cors')({ origin: true, });   
exports.yourfunction = functions.https.onRequest((request, response) => {  
   return cors(request, response, () => {  
        // *Your code*
    });
});

私の場合、エラーはクラウド関数の呼び出し元によるアクセス制限が原因でした。クラウド関数呼び出し元にallUsersを追加してください。リンクをキャッチしてください。詳細は記事を参照してください

他の解決策がどれも機能しない場合は、呼び出しの最初に以下のアドレスを追加して、CORS-リダイレクトを有効にしてみてください。

https://cors-anywhere.herokuapp.com/

JQuery AJAXリクエストを使用したサンプルコード：

$.ajax({
   url: 'https://cors-anywhere.herokuapp.com/https://fir-agilan.web.app/gmail?mail=asd@gmail.com,
   type: 'GET'
});

私の経験を追加します。CORSエラーが発生した理由を見つけるために何時間も費やしました。

クラウド関数の名前を変更したことがあります（大きなアップグレード後に最初に試みていたものです）。

そのため、Firebaseアプリが誤った名前でクラウド関数を呼び出していた場合、CORSエラーではなく404エラーをスローするはずでした。

Firebaseアプリでクラウド関数名を修正すると、問題が修正されました。

これに関するバグレポートをここに記入しました https://firebase.google.com/support/troubleshooter/report/bugs