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

Posted 2023-02-22

【中文标题】由于 CORS 问题，firebase 托管阻止脚本

【英文标题】：firebase hosting blocking script due to CORS issue

【发布时间】：2019-02-15 09:57:29

【问题描述】：

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

还需要什么？

【参考方案1】：

尝试直接从文档中粘贴此内容，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" : "*"
     ]
  

【讨论】：

它不会有帮助，因为唯一的区别是来源更具限制性，我在访问 .json 时遇到问题，根据上述规则将被拒绝

我明白了。 https://oracle-bot-sdk. 是什么？这看起来不像是 Firebase 托管？

oracle-bot-sdk.firebaseapp.com 。这就是完整的网址。如果没有 firebaseapp.com，你在哪里看到它？

【参考方案2】：

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

【讨论】：

您有文档链接吗？

【参考方案3】：

确保您拥有 Blaze 或 Flame 计划，我认为 Spark 计划会阻止外部访问，原因可能与使用云功能相同

Cloud Functions for Firebase - Billing account not configured

【参考方案4】：

除了您对 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（顺便说一句，文档中没有提到 Cors）

【讨论】：

但我没有使用 firebase 功能

安装cors 并放置此行const cors = require('cors')(origin: true); 后，它会显示TypeError: Cannot read property 'origin' of undefined。

我在函数日志中遇到同样的错误无法读取未定义的属性“发送”。你是如何解决这个问题的

【参考方案5】：

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

有些东西你可以试试。与上面的答案类似，但略有不同：

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

我还会在这里阅读一些信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin 如果你还没有。

我希望我能以某种方式提供帮助。告诉我。

【讨论】：

** 表示任何地方，因此比单个 * 更开放。我还是试了一下，没有运气。我会阅读最后一个链接，看看是否有新内容

没问题，我知道'*'和''是一样的。只是真的有选择性。由于您有两个位于不同域名和托管环境的站点，您要么需要将两个站点带到同一个主页，要么使用 Window.postMessage() 进行跨域通信。我以前用过它，虽然很棘手，但很有效。这是链接：developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

【参考方案6】：

我猜您已经混淆了 firebase 托管和 firebase 云功能。 Firebase 托管用于托管静态网站和网络应用程序。当您尝试从托管在不同域上的网站访问时，您的托管配置未应用。您提到您托管了一些脚本，这听起来像云功能。良好的旧 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 文件。我将其部署为托管。这样不行吗？

其中一个被访问的文件是 oracle-bot-sdk.firebaseapp.com/loader.json，由于 cors 而被阻止。为什么这是你的问题？

我建议将您的所有文件托管在单个主机上，无论是 firebase 托管还是与您的其他网站一起托管的主机上