web-dev-qa-db-ja.com

CORSの問題によるfirebaseホスティングブロッキングスクリプト

Firebaseホスティングを使用していくつかのスクリプトをホストし、別のサイトからアクセスしようとしています。 CORSの問題により、当然ブロックされます。他のフォーラムスレッドなどに関する私の研究に基づいて、私はfirebase.jsonを以下のように変更しました

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [ {
    "source" : "**",
    "headers" : [ {
      "key" : "Access-Control-Allow-Origin",
      "value" : "*"
    } ]
  }]
}
}

これにより、どのURLもここでホストされているリソースにアクセスできます。しかし、私のサイトを実行しようとすると、私はまだ下に表示されます

        Access to XMLHttpRequest at 'https://Oracle-bot-sdk.firebaseapp.com//loader.json' 
    from Origin 'https://insurance-bot.moblize.it' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

他に何が必要ですか？

firebasecorsfirebase-hosting
15
Vik

BlazeまたはFlameプランがあることを確認してください。Spark=プランは外部アクセスをブロックします。クラウド機能の場合と同じ理由かもしれません

Firebaseのクラウド機能-課金アカウントが設定されていません

2
Marc

Corsのfirebase.jsonの変更に加えて、firebase関数のhttp/https関数にもcorsプラグインを含める必要があります。

例

const cors = require('cors')({Origin: true});
const functions = require('firebase-functions');

const app = functions.https.onRequest((req, res) => {
    cors(req, res, () => {
        // Your app stuff here

        // Send Response
        res.status(200).send(<response data>);
    });
});

Expressアプリの例

import express from "express";
const cors = require('cors')({Origin: true});

const app = express();
app.get('**', (req, res) => {
  cors(req, res, () => {
      // Your App Here

      // Send response
      res.status(200).send(<response data>);
    });
});

その他のドキュメント クラウド機能を使用した動的コンテンツの提供-ホスティングサイトへのHTTP関数の作成 （Corsはドキュメントに記載されていませんbtw）

1
Matthew Rideout

https://Oracle-bot-sdk.firebaseapp.com を呼び出しているサイト（ https://insurance-bot.moblize.it/ ）ホスト型アプリ？

Firebase Toolsのバージョン4.2以降では、同じFirebase Projectを使用してマルチサイトホスティングをセットアップできるため、私は尋ねます。それがあなたの状況をまったく助けてくれるかどうかはわかりません。言及したかっただけです。

エラーメッセージ：

insurance-bot.moblize.it/:1 Failed to load https://Oracle-bot-sdk.firebaseapp.com//loader.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://insurance-bot.moblize.it' is therefore not allowed access.

https://Oracle-bot-sdk.firebaseapp.com//loader.json に余分な「/」があります。私はそれが問題だとは思わないが、言及したかった。

あなたが試すことができる何かがあります。上記の答えに似ていますが、少し異なります：

"headers": [
    {
        "source": "*",
        "headers": [
            {
                "key": "Access-Control-Allow-Origin",
                "value": "*"
            }
        ]
    }
]

また、私はここでいくつかの情報を読むでしょう： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin 既に。

何らかの形で助けていただければ幸いです。お知らせ下さい。

1
Jared

ドキュメントから直接、これを貼り付けてみてください ホスティング動作のカスタマイズ ：

"hosting": {
  // Add the "headers" section within "hosting".
  "headers": [ {
    "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers" : [ {
      "key" : "Access-Control-Allow-Origin",
      "value" : "*"
    } ]
  }
}
0
Ron Royston

FirebaseホスティングとFirebaseクラウド機能を混同していると思います。 Firebaseホスティングは、静的なWebサイトおよびWebアプリをホストするために作成されています。別のドメインでホストされているWebサイトからアクセスしようとすると、ホストの構成が適用されません。いくつかのスクリプトをホストし、クラウド機能のように聞こえると述べました。また、古き良きCORSヘッダーは、次のようなクラウド機能に役立ちます。

exports.corsEnabledFunction = (req, res) => {
  res.set("Access-Control-Allow-Origin", "*");
  res.set("Access-Control-Allow-Methods", "GET");
  res.set("Access-Control-Allow-Headers", "Content-Type");
  res.set("Access-Control-Max-Age", "3600");

  // Continue with function code
  ...
}

詳細： https://cloud.google.com/functions/docs/writing/http#handling_cors_requests

0
Yevgen