-1

I'm working on my project which includes Angular 9 application using firebase functions. I deployed some function, which should update some values on the Firebase Realtime Database. Unfortunately, I encountered a problem with CORS policy if I use my API.

After adding middleware to my express server, where I added these code, the problem still occurs.

app.post('/changeQuantity', permit(), (request: any, response: any) => {
   response.status(200).send({ data: { Message: 'Changing order quantity - success.' } });
})

export default function permit() {
    return (req: any, _res: any, next: any) => {
        _res.setHeader('Access-Control-Allow-Origin', '*'); 
        _res.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
        next();
    };
}

I noticed, that I get this error when frequently requesting API.

Here is the error which server returns:

Access to fetch at [here is a link to my API endpoint] from origin [my origin] has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Did anybody have the same issues with the firebase functions API? Could it be related to frequent requests of my API endpoints from the development environment? Thanks in advance.

AL_ITM
  • 1
  • 1
  • 2
    Please edit the question to show the complete, minimal code that doesn't work the way you expect. Not just those two lines, because we can't see if you added them correctly. You might want to instead consider just using cors middleware instead, which will handle everything for you. https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase – Doug Stevenson Nov 24 '20 at 22:57
  • @DougStevenson, I've edited it. The header is actually is returned, but as I mentioned, after requesting the API too frequently, the CORS error occurs. – AL_ITM Nov 24 '20 at 23:10
  • If you only get the error after making frequent requests, the cause is likely that the server is sending back a 429 error or some other 4xx or 5xx error response. And it’s normal and expected that 4xx or 5xx errors won’t have the Access-Control-Allow-Origin response header. But even if they did, they’d still be 4xx and 5xx errors. So you probably want to use the Network pane in browser devtools to check what the HTTP status code of the response is — see whether it’s a 429 or something. – sideshowbarker Nov 25 '20 at 07:25
  • Are you able to solve your issue by the @Joew8902 answer below? Please also have a look into the following [Cloud Functions Official Documentation](https://cloud.google.com/functions/docs/writing/http#handling_cors_requests) for handling CORS requets. – Nibrass H Nov 26 '20 at 15:37
  • Thanks for your support, actually I was able to solve this problem by updating the firebase plan to pay-as-you-go. After I did it, it works like a charm – AL_ITM Nov 27 '20 at 15:06

1 Answers1

-1

Try using response.header to set the CORS properties, like this

app.use((request, response, next) => {
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    next();
});
Joew8902
  • 1