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

lvmkulzt  于 2023-02-13  发布在  其他
关注(0)|答案(8)|浏览(199)

我正在使用firebase托管来托管一些脚本,并试图从另一个站点访问它们。由于CORS问题,它自然会被阻止。根据我对其他论坛线程等的研究,我修改了firebase.json如下

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

这基本上允许任何网址访问这资源主持在这里.然而,在尝试到运行我的站点我仍然看到下面

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.

还需要什么?

yhxst69z

yhxst69z1#

除了为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 *)

whitzsjs

whitzsjs2#

调用https://oracle-bot-sdk.firebaseapp.com的站点(https://insurance-bot.moblize.it/)是否为Firebase托管的应用程序?
我这么问是因为4.2+版的Firebase工具允许你使用同一个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如果您还没有。
希望我能帮上什么忙。有消息通知我。

hi3rlvi2

hi3rlvi23#

我猜你已经混淆了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
  ...
}

更多信息:www.example.comhttps://cloud.google.com/functions/docs/writing/http#handling_cors_requests

unguejic

unguejic4#

确保您有Blaze或Flame计划,我认为Spark计划会阻止外部访问,原因可能与云功能相同
Cloud Functions for Firebase - Billing account not configured

xeufq47z

xeufq47z5#

1.转到Google云控制台:https://console.cloud.google.com/functions/
1.单击要授予访问权限的功能旁边的复选框。
1.单击右上角的"显示信息面板"以显示"权限"选项卡。
1.单击添加成员。
1.在"新成员"字段中,键入allUsers。
1.从Select a role下拉菜单中选择角色Cloud Functions〉Cloud Functions Invoker。
1.单击保存。
摘自:www.example.comhttps://github.com/firebase/firebase-functions/issues/645#issuecomment-605835353

hl0ma9xz

hl0ma9xz6#

转到Google云控制台:https://console.cloud.google.com/functions/
单击要授予访问权限的功能旁边的复选框。
单击右上角的"显示信息面板"以显示"权限"选项卡。
单击添加成员。
在"新成员"字段中,键入allUsers。
从Select a role下拉菜单中选择角色Cloud Functions〉Cloud Functions Invoker。
单击保存。
摘自:www.example.comhttps://github.com/firebase/firebase-functions/issues/645#issuecomment-605835353
这是最好的解决方案,我张贴在上面

ftf50wuq

ftf50wuq7#

尝试粘贴此内容,因为它直接来自文档,自定义托管行为:

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

kcrjzv8t8#

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

相关问题