Enabling CORS in Firebase Hosting

1
votes

I have this really annoying issue with CORS and my Google Cloud function...

the error I get is:

Access to XMLHttpRequest at [My function URL] from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Ive already tried to handle it on the function side with the following code:

if request.method == 'OPTIONS':
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Max-Age': '3600'
        }

        return ('', 204, headers)

and then added in the main return with:

headers = {
            'Access-Control-Allow-Origin': '*'
        }
....

return(json.dumps(data), 200, headers)

this doesnt work....

I also tried with the firebase.json headers approach and also not working...

even tried with the HttpHeaders in angular like so:

const headers = new HttpHeaders() 
      .set("Access-Control-Allow-Origin", "*") 
      .set("Access-Control-Allow-Methods", "POST, GET, OPTIONS") 
      .set('cache-control', 'no-cache')

also not working.....

then I tried with a proxy (just to check if that is the actual problem) added the proxy.config.json and of course in the dev it just works...

but the problem is, I need to be able to upload the Angular app to the firebase hosting so how can I fix the CORS error in the backend?

2
angularfirebasegoogle-cloud-functionsfirebase-hosting
You should review the network tab of your angular app. Most likely this was the pre-flight request (OPTIONS header) that was blocked. You would need to at minimum add OPTIONS to Access-Control-Allow-Methods – Alexander Staroselsky
I forgot to mention I tried that already... javascript const headers = new HttpHeaders() .set("Access-Control-Allow-Origin", "*") .set("Access-Control-Allow-Methods", "POST, GET, OPTIONS") .set('cache-control', 'no-cache') – Juan Quintero
Does this error appear while deploying to firebase hosting? Can you explain the question a bit more. if there is a cloud function. Also add that please. – Muhammad Kamran
@MuhammadKamran Ive added the part of the cloud function that try to handle the CORS, the error is when I try to use the request both in dev environment and in the firebase hosting, I tried disabling the CORS in Chrome and of course it works but its not a solution for production.... – Juan Quintero
Hi. I got your point. You just need to handle cors on your cloud function. I can provide specific solution. But I still dont see the cloud function in your post. Did you edit it? – Muhammad Kamran

2 Answers

2
votes

Well its solved now, the issue:

I ahve the CORS headers in the cloud functions (server side) AND in the webApp side too this somehow is not allowed so i just removed the code from the webapp side and left the code only in the cloud function (server side) this solved the problem...

Thanks to all!

1
votes

One of the easiest way to get rid of cors errors is to use callable functions. They also have the user context. Which can be really usefull.

But if you want to create an api. I would recommend using express and cors package. Here is the code that I use:

import * as express from 'express';
import * as cors from 'cors';

const app = express();
// cors middleware handles all the cors related issues.
app.use(cors({ origin: '*' }));

// you can add your routes in your app.
app.use('/users', usersRoute);

export const api = functions.https.onRequest(app);