0

I have read many threads around this topic and I still can't wrap my head around it.

I've built a web app that allows users to crawl their website sitemap and add it to a document in Firebase. I'm using Firebase hosting to host the web app, which was pushed to a subdomain of mine.

I am using this package to crawl the sitemap - https://www.npmjs.com/package/get-sitemap-links

I get this error every time in production - "Access to XMLHttpRequest at 'https://www.userswebsite.com/page-sitemap.xml' from origin 'https://app.mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I've not created any cloud functions for this web app but have read I have to enable CORS using a function. How can I do this?

user16034511
  • 334
  • 1
  • 14
  • Have you checked this [document](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin)? – Roopa M Nov 27 '22 at 13:28
  • This document doesn't specifically answer my Firebase question. I know I need to enable CORS in the Header but I don't know how to do that with Firebase? – user16034511 Nov 27 '22 at 23:20

1 Answers1

0

To enable CORS you have to install library in your function folder by using below command

npm i cors --save

And import as shown below :

const cors = require('cors')({origin: true});

You can also set CORS headers without any library using below snippet

response.set('Access-Control-Allow-Origin', '*');

For more information have a look at this documentation and this thread

If you are configuring CORS for HTTP function. Use the cors option to control which origins can access your function.

If true, allows CORS on requests to this function. If this is a string or RegExp, allows requests from domains that match the provided value. If this is an Array, allows requests from domains matching at least one entry of the array. Defaults to true for https.CallableFunction and false otherwise.

Signature:
cors?: string | boolean | RegExp | Array<string | RegExp>;

Roopa M
  • 2,171
  • 4
  • 12
  • Sorry, what function library? – user16034511 Nov 28 '22 at 08:56
  • @user16034511 Can you elaborate on your question? you mean, which library you should install? – Roopa M Nov 28 '22 at 09:05
  • Which folder? I have my front end web app, reactJS, and then I’ve used firebase hosting for the back end. So I have no folder called function – user16034511 Nov 28 '22 at 09:18
  • you can create `function` folder for `firebase` following this [doc](https://firebase.google.com/docs/functions/get-started#initialize-your-project) and you can manage dependencies manually while creating folder – Roopa M Nov 28 '22 at 09:34
  • I've enabled functions to my project, and added this code to my index.js file and deployed. **exports.fn = functions.https.onRequest((req, res) => { cors(req, res, () => {}) });** To scrape the users sitemap I'm using this package - GetSitemapLinks(sitemapURL). Is there something I need to do now to call the getsitemaplinks within the function? Or should I not use that package and do something else to scrape sitemaps? Thanks for your help – user16034511 Nov 29 '22 at 09:32
  • @user16034511 As per this [repo](https://github.com/sromexs/get-sitemap-links) and this [tutorial](https://www.youtube.com/watch?v=H0rZnxRV7_k) you have to call `getsitemaplinks` within the function – Roopa M Nov 29 '22 at 12:56