Angular Allow Cross Origin Requests

Question

I am running Angular 9 project connected to firebase.

I am having issues with CORS, I have 2 scenarios:

1. Requesting Image Url from my firestore database

ERROR: Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com .... from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. Accessing Fixer.io api

Currency Service

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class CurrencyService {
    constructor(private http: HttpClient) {}
    async loadCurrencies(): Promise<any> {
        var response = this.http.get("http://api.fixer.io/api/latest");
        response.subscribe((currencies) => {
            console.log(currencies);
        });
    }
}

ERROR: Access to XMLHttpRequest at 'http://api.fixer.io/api/latest' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have read a number of articles and posts on stack overflow and the following suggestions were made but they have made no difference.

SOLUTIONS

*****1. Configure Proxy*****

proxy.config.json
{
  "/api/*": {
      "target": "http://localhost:3000",
      "secure": false,
      "logLevel": "debug"
  }
}

Added the following to angular.json
"serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
            options": {
            "browserTarget": "fuse:build",
            "proxyConfig": "src/proxy.conf.json"
          },

*******2. Installed Google Chrome Extension CORS Unblock*******

did you added proxyConfig under serve config of angular.json? — Sayooj V R, Apr 10 '20 at 05:52
Hi @ccocker, have you tried to enable CORS on your firebase API...perhaps check this answer https://stackoverflow.com/questions/57326098/enable-cors-in-firebase-cloud-function#answer-57326828 — bloo, Apr 10 '20 at 05:55
@AshwynHorton thanks that is a good idea i will give that a go — ccocker, Apr 10 '20 at 06:09
after adding that you have to serve the app by either like this ng serve --proxy-config proxy.conf.json or you have to proxyConfig under serve in angular.json. — Sayooj V R, Apr 10 '20 at 06:13

score 0 · Answer 1 · answered Apr 10 '20 at 06:05

This is not an issue with your Angular application...Its an issue on the Firebase app

the CORS policy is meant to block requests from domains that the server is not specified to send responses to...so in order to get a response from the server you need to tell the server to allow responses from your localhost server. Usually we would just allow all servers but in node, like firebase, there is a library you can use to very easily configure CORS to your firebase app.

https://www.npmjs.com/package/cors

Hope this helps...

Angular Allow Cross Origin Requests

1 Answers1