由于CORS问题,firebase托管阻止脚本

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

调用https://oracle-bot-sdk.firebaseapp.com的网站 ( https://insurance-bot.moblize.it/ ) 是Firebase 托管应用吗？

我之所以这么问，是因为 Firebase 工具 4.2+ 版本允许您使用相同的 Firebase 项目设置多站点托管。我不确定这是否会对您的情况有所帮助。只是想提一下。

在错误消息中：

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中有一个额外的“/” 。我怀疑这就是问题所在，但想提一下。

有一些事情你可以尝试。与上面的答案类似，但略有不同：

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: //developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin如果您还没有。

我希望我能够以某种方式提供帮助。让我知道。

Answer 2

除了针对 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）

Answer 3

尝试直接粘贴来自文档“自定义托管行为”的内容：

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