如何使用 Firebase 主机修复被阻止的 CORS？

Question

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?

Answer 1

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