logo标签列表

Firebase Hosting由于CORS问题阻止了脚本加载。

firebasecorsfirebase-hosting
35

我正在使用Firebase Hosting来托管一些脚本，并尝试从另一个站点访问它们。由于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.

还需要什么？

9个回答
5
这个站点 (https://insurance-bot.moblize.it/) 是否调用的是托管在 Firebase 上的应用程序 (https://oracle-bot-sdk.firebaseapp.com)?

我问这个问题是因为 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中有一个额外的'/'。我怀疑这不是问题所在，但想要提一下。

有一个你可以尝试的方法。与上面的答案类似，但略有不同：

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

此外，我建议你阅读这里的一些信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin，如果你还没有看过的话。
希望我的回答能对你有所帮助。请告诉我是否还需要其他帮助。
** 表示任何地方，比单个 * 更通用。我仍然尝试了一下，但没有成功。我将阅读最后一个链接，看看是否有新的内容。 - Vik
没问题，我知道 '**' 和 '*' 是一样的。只是非常挑剔而已。由于您有两个位于不同域名和托管环境的站点，您需要将两个站点带到同一个主页中，或者使用 Window.postMessage() 来进行跨域通信。我以前用过它，它很棘手，但是有效。这是链接：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage - Jared
5
除了在 firebase.json 中更改 cors 的设置，你的 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）。

7
但是我没有使用 Firebase 函数。 - Vik
安装了 cors 并添加了这行代码 const cors = require('cors')({origin: true}); 后，出现了 TypeError: Cannot read property 'origin' of undefined 错误。 - Antonio Ooi
我在函数日志中遇到了同样的错误：“无法读取未定义的属性'send'”。 你是如何解决这个问题的？ - Jag99
3
前往Google Cloud控制台：https://console.cloud.google.com/functions/ 勾选要授予访问权限的函数旁边的复选框。
单击右上角的“显示信息面板”以显示“权限”选项卡。
单击“添加成员”。
在“新成员”字段中，键入“allUsers”。
从“选择角色”下拉菜单中选择Cloud Functions> Cloud Functions Invoker角色。
单击“保存”。
摘自：https://github.com/firebase/firebase-functions/issues/645#issuecomment-605835353 这是我所发现的最佳解决方案。
谢谢！这应该是更新的答案。 - Sandy Veliz
2
我猜你可能把Firebase Hosting和Firebase Cloud Functions搞混了。Firebase Hosting是用来托管静态网站和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。该链接提供有关如何处理跨源资源共享请求的信息。
我的托管脚本是js文件，不是云函数。我将它们部署为托管服务。基本上，我有一个包含几个js文件、几张图片和json文件的公共文件夹。我将其部署为托管服务。这样做不好吗？ - Vik
被访问的文件之一是 https://oracle-bot-sdk.firebaseapp.com/loader.json，由于 CORS 而被阻止。依您之见，这是什么问题？ - Vik
1
我建议您将所有文件托管在单个主机上，可以选择 Firebase 托管或与您的其他网站托管在同一主机上。 - Yevgen
2
0
0

对我来说，什么都没用，所以我重命名并重新部署了云函数，问题得到了解决。

-1

尝试直接从文档中复制粘贴此内容，自定义托管行为：

"hosting": {
  // Add the "headers" section within "hosting".
  "headers": [ {
    "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers" : [ {
      "key" : "Access-Control-Allow-Origin",
      "value" : "*"
    } ]
  }
}
这并没有什么帮助，因为唯一的区别是源，这更加限制了。我在访问一个.json文件时遇到了问题，根据上述规则将被拒绝访问。 - Vik
我明白了。https://oracle-bot-sdk. 是什么？这看起来不像是 Firebase Hosting？ - Ronnie Royston
https://oracle-bot-sdk.firebaseapp.com是完整的网址，你在哪里看到它没有firebaseapp.com？ - Vik
-3

Firebase 托管 CORS 在使用自定义域名时无法正常工作。 然而，CORS API 可以在 https://yyyyyyy.web.app/ 或 firebaseapp.com 域上运行

2
你有文档链接吗？ - Ben Downey
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接