How to resolve CORS policy issue in Ionic Angular app?

Question

I am trying to execute the below function in my Ionic Angular app, cloudFunctionUrl is a cloud function I have in my firebase project:

import { HttpClient } from '@angular/common/http';
private http: HttpClient

like(post) {
this.http.post('cloudFunctionUrl', JSON.stringify(body), {
      responseType: 'text'
    }).subscribe((data) => {
      console.log(data);
    }, (error) => {
      console.log(error);
    });
}

To get over the CORS issue, I installed the Allow CORS: Access-Control-Allow-Origin chrome plugin. Below is a list of the whitelisted domains:

http://localhost:8100
chrome.google.com
localhost
localhost:8100
localhost:8100/profile
cloudFunctionUrl

The like function above is executed on localhost:8100/profile.

I'm experiencing two issueS:

I navigate to localhost:8100/profile no problem, but when I execute like, I get this error message:

Access to XMLHttpRequest at 'cloudFunctionUrl' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If I go to the firebase console, & I have the CORS plugin turned on, it says "There was an error loading your projects"

Can someone please tell me how I can resolve this?

I also tried to add the below headers to the request, but the error is still appearing:

let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });
    this.http.post('cloudFunctionUrl', JSON.stringify(body), {
      headers: headers,
      responseType: 'text'
    }

Does this answer your question? [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) — Quentin, Mar 17 '20 at 08:07

score 2 · Accepted Answer · answered Mar 17 '20 at 17:51

You are trying to execute cloudFunctionUrl (cloud function) from your Ionic Angular app.

I also tried to add the below headers to the request, but the error is still appearing

You have to add the heather in your cloud function, not in the Angular App. Your Angular App will call the function, and your function will return the required headers, allowing your App to access data from cloud function.

let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });

Your cloud function has to support CORS requests from your Angular App, node.js example:

/**
 * HTTP function that supports CORS requests.
 *
 * @param {Object} req Cloud Function request context.
 * @param {Object} res Cloud Function response context.
 */
exports.corsEnabledFunction = (req, res) => {
  // Set CORS headers for preflight requests
  // Allows GETs from any origin with the Content-Type header
  // and caches preflight response for 3600s

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

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  } else {
    res.send('Hello World!');
  }
};

Handling CORS requests

score 0 · Answer 2 · answered Mar 17 '20 at 08:06

The documentation Handling CORS requests explains that:

Cross-Origin Resource Sharing (CORS) is a way to let applications running on one domain access content from another domain, for example, letting yourdomain.com make requests to region-project.cloudfunctions.net/yourfunction.

In that documentation, you can get more clarification on the use of CORS on Cloud Functions.

Usually adding the below code, helps the use of CORS on Firebase - as per this post on the Community here indicates.

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

However, it might be the case, that this won't be enough to solve your case. For this reason, I could find some useful cases from the Community, of users facing similar errors with CORS in the usage of Cloud Functions and Angular.

I would recommend you to take a look at them below, so you can get more information on what might be affecting your application and what might help you fix it as well.

Let me know if the information helped you!

How to resolve CORS policy issue in Ionic Angular app?

2 Answers2