firebase hosting blocking script due to CORS issue

Question

I am using firebase hosting to host few scripts and trying to access them from another site. it naturally gets blocked due to CORS issues. based on my research on other forum threads etc i modified the firebase.json as below

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

which essentially allow any url to access the resources hosted here. however, on trying to run my site i still see below

        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.

what else is needed?

score 5 · Answer 1 · answered Sep 15 '18 at 01:17

Is the site (https://insurance-bot.moblize.it/) that is calling to https://oracle-bot-sdk.firebaseapp.com a Firebase hosted app?

I only ask because with version 4.2+ of Firebase Tools allows you to setup Multisite hosting using the same Firebase Project. I am not sure if that would help your situation out at all. Just wanted to mention it.

In the error message:

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.

I noticed an extra '/' in https://oracle-bot-sdk.firebaseapp.com//loader.json. I doubt that is the issue, but wanted to mention it.

There is something that you could try. Similar to the answers above but a little different:

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

Also I would read some of the info here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin If you have not already.

I hope I was able to help in some way. Let me know.

** means anywhere so that is more open than a single *. i still gave a try and no luck. i will read the last link to see if something new — Vik, Sep 15 '18 at 03:48
No problem, I know '**' & '*' are the same. Just being really selective. Since you have two sites that are on separate domain names and hosting environments you either need to bring both sites into the same home, or use Window.postMessage() to do your cross domain communication. I have used it before and it is tricky but works. Here is the link: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage — Jared, Sep 17 '18 at 00:30

Matthew Rideout · Answer 2 · 2018-09-19T15:50:45.623

5

In addition to your firebase.json changes for cors, your firebase functions http / https function needs to also include the cors plugin.

Example

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 App Example

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>);
    });
});

More documentation Serve Dynamic Content with Cloud Functions - Create an HTTP function to your Hosting site (Cors is not mentioned in the documentation btw)

edited Sep 19 '18 at 15:50

answered Sep 19 '18 at 15:42

Matthew Rideout

7,330
2
42
61

7

but i am not using firebase functions – Vik Sep 19 '18 at 21:45
After installing `cors` and placing this line `const cors = require('cors')({origin: true});`, it says `TypeError: Cannot read property 'origin' of undefined`. – Antonio Ooi May 06 '20 at 09:45
Im getting the same error in the function log Cannot read property 'send' of undefined. How did you fix this issue – Jag99 Aug 04 '21 at 09:09

score 3 · Answer 3 · answered Feb 11 '23 at 11:30

Go to the Google Cloud Console: https://console.cloud.google.com/functions/

Click the checkbox next to the function on which you want to grant access.

Click Show Info Panel in the top right corner to show the Permissions tab.

Click Add member.

In the New members field, type allUsers.

Select the role Cloud Functions > Cloud Functions Invoker from the Select a role drop-down menu.

Click Save.

taken from: https://github.com/firebase/firebase-functions/issues/645#issuecomment-605835353

This was the best solution for me as posted above

Thx! this should be the updated answer – Sandy Veliz Jul 06 '23 at 16:36 — Sandy Veliz, Jul 06 '23 at 16:36

score 2 · Answer 4 · answered Sep 14 '18 at 19:46

2

My guess that you've mixed up firebase hosting and firebase cloud functions. Firebase hosting is made for hosting static websites and web apps. As you try to access from your website that is hosted on different domain your configuration for hosting is not applied. You mentioned that you host some scripts and it sounds like cloud functions. And good old CORS headers can help to your cloud functions like:

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
  ...
}

More info: https://cloud.google.com/functions/docs/writing/http#handling_cors_requests

answered Sep 14 '18 at 19:46

Yevgen

4,519
3
24
34

my hosted scripts are js files not the cloud functions. i deployed them as hosting. bascially i have a public folder containing few js files, few images and json files. i deployed it as hosting. is that not ok? – Vik Sep 14 '18 at 21:07
one of the file being accessed is https://oracle-bot-sdk.firebaseapp.com/loader.json whch is blocked due to cors. why is that a problem as per u? – Vik Sep 14 '18 at 21:21
1

I’d suggest to host all your files on single host either firebase hosting or on the host with your other website – Yevgen Sep 15 '18 at 05:53

score 2 · Answer 5 · answered Nov 29 '18 at 00:47

2

Make sure you have the Blaze or Flame plan, I think Spark plan blocks external access, maybe for the same reason as it does with cloud functions

Cloud Functions for Firebase - Billing account not configured

answered Nov 29 '18 at 00:47

Marc

442
7
15

score 0 · Answer 6 · answered Jun 16 '22 at 00:14

Go to the Google Cloud Console: https://console.cloud.google.com/functions/
Click the checkbox next to the function on which you want to grant access.
Click Show Info Panel in the top right corner to show the Permissions tab.
Click Add member.
In the New members field, type allUsers.
Select the role Cloud Functions > Cloud Functions Invoker from the Select a role drop-down menu.
Click Save.

taken from: https://github.com/firebase/firebase-functions/issues/645#issuecomment-605835353

score 0 · Answer 7 · answered May 29 '23 at 14:15

0

Nothing worked for me so I renamed and redeployed the cloud function which solved the issue.

answered May 29 '23 at 14:15

Mercurial

2,095
4
19
33

score -1 · Answer 8 · edited May 28 '21 at 07:29

-1

Try pasting this as it's directly from the documentation, 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" : "*"
    } ]
  }
}

edited May 28 '21 at 07:29

Kariem

4,398
3
44
73

answered Sep 11 '18 at 00:51

Ronnie Royston

16,778
6
77
91

it wont help as the only difference is source which is even more limiting, i am getting issue while accessing a .json which as per above rule will be denied – Vik Sep 11 '18 at 03:33
I see. what is `https://oracle-bot-sdk.` ? That doesn't look like firebase hosting? – Ronnie Royston Sep 11 '18 at 14:53
https://oracle-bot-sdk.firebaseapp.com . thats the complete url. where do u see it without firebaseapp.com ? – Vik Sep 11 '18 at 17:47

score -3 · Answer 9 · answered Nov 29 '20 at 15:00

-3

Firebase hosting CORS doesn't work WITH custom domain. However, CORS API works with https://yyyyyyy.web.app/ or firebaseapp.com domain

answered Nov 29 '20 at 15:00

Sumanta

1,165
4
15
25

2

Do you have a link to documentation? – Ben Downey Dec 15 '20 at 17:19

firebase hosting blocking script due to CORS issue

9 Answers9

Linked

Related