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

时间:2018-09-10 23:20:45

标签: firebase cors firebase-hosting

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

还需要什么?

4 个答案:

答案 0 :(得分: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 )

答案 1 :(得分:1)

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

Cloud Functions for Firebase - Billing account not configured

答案 2 :(得分:0)

尝试直接粘贴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" : "*"
    } ]
  }
}

答案 3 :(得分:-1)

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