Question

我正在使用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.

还需要什么？

Answer 1

除了对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>);
    });
});

更多文档Serve Dynamic Content with Cloud Functions - Create an HTTP function to your Hosting site（文档btw中未提及Cors ）

Answer 2

请确保您具有Blaze或Flame计划，我认为Spark计划会阻止外部访问，也许是出于与云功能相同的原因

Cloud Functions for Firebase - Billing account not configured

Answer 3

尝试直接粘贴Customize Hosting Behavior中的内容，

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

Answer 4

Firebase托管CORS不适用于自定义域。但是，CORS API可与https://yyyyyyy.web.app/或firebaseapp.com域一起使用

由于CORS问题而导致Firebase托管阻止脚本

4 个答案: