title: Error when GET HTTPS from REST API in Angular
body: <p>I have an Angular app running which uses an external api to get countries ISOs.
  This API uses https and it's giving me an error.</p>
  
  <p>The thing is: when I use a proxy in my angular local environment, mapping <code>/iso-api/</code> to the real url it works ok.</p>
  
  <pre><code>"/iso-api/*": {
      "target": "https://www...",
      "pathRewrite": { "^/iso-api": "" },
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug"
  }
  </code></pre>
  
  <p>But I want this to work in production, so I want to use the real url.</p>
  
  <p>In my server I am returning the <code>Access-Control-Allow-Origin: *</code> header already.</p>
  
  <p>I've tried to run the angular server with ssl (as the external api uses https), but I receive the same error.</p>
  
  <p>I know a solution would be to implement the proxy in the server, but I believe this should not be done and there may be a way to retrieve this data from the frontend.
  Help please.</p>
  
  <h2>Response</h2>
  
  <p>This is the network error in <strong>Chrome</strong>:
  <a href="https://i.stack.imgur.com/CsJ7l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CsJ7l.png" alt="browser network tab"></a></p>
  
  <p>In <strong>Firefox</strong>, the request ends with 200 OK and returns data, but CORS error is thrown and I cannot access the data from the app: <code>CORS header 'Access-Control-Allow-Origin' missing</code></p>
  
  <p><strong>General</strong></p>
  
  <pre><code>Request URL: https://www...
  Referrer Policy: no-referrer-when-downgrade
  </code></pre>
  
  <p><strong>Request headers</strong></p>
  
  <pre><code>:method: GET
  :scheme: https
  accept: application/json, text/plain, */*
  accept-encoding: gzip, deflate, br
  accept-language: es-ES,es;q=0.9,en;q=0.8
  origin: http://localhost:4200
  referer: http://localhost:4200/app/login
  sec-fetch-dest: empty
  sec-fetch-mode: cors
  sec-fetch-site: cross-site
  </code></pre>
  
  <p><strong>Response headers</strong></p>
  
  <pre><code>accept-ranges: bytes
  cache-control: max-age=0
  content-encoding: gzip
  content-language: en-US
  content-length: 68356
  content-type: application/json
  date: Mon, 27 Apr 2020 14:49:30 GMT
  expires: Mon, 27 Apr 2020 14:49:30 GMT
  referrer-policy: strict-origin-when-cross-origin
  server-timing: cdn-cache; desc=HIT
  server-timing: edge; dur=1
  server-timing: ACTT;dur=0,ACRTT;dur=88
  set-cookie: ... expires=Mon, 27 Apr 2020 16:49:30 GMT; max-age=7200; path=/; domain=...; HttpOnly
  set-cookie: ... Domain=...; Path=/; Expires=Mon, 27 Apr 2020 18:49:30 GMT; Max-Age=14400; HttpOnly
  set-cookie: ... Domain=...; Path=/; Expires=Tue, 27 Apr 2021 14:49:30 GMT; Max-Age=31536000; Secure
  status: 200
  vary: Accept-Encoding
  </code></pre>
  
  <h1>UPDATE</h1>
  
  <p>Angular service code</p>
  
  <pre class="lang-js prettyprint-override"><code>import { HttpClient } from '@angular/common/http';
  
  ...
  
  constructor(
      private _http: HttpClient,
      private _errorUtil: ErrorUtilService,
      private _converter: StoreConverter
    ) {}
  
  ...
    getCountries(): Observable&lt;CountryWithLanguages[]&gt; {
      return this._http.get&lt;GetStoresResponse&gt;(API.storeUrl).pipe(
        catchError(this._errorUtil.handle),
        map(result =&gt; result.stores),
        switchMap(stores =&gt; stores),
        filter(this._isActiveStore),
        map(store =&gt; this._converter.toView(store)),
        toArray()
      );
    }
  
  </code></pre>
  
  <p>To serve the app I use angular dev server, I do not add the 'Access-Control-Allow-Origin' header manually but, in the browser, I see that it is being added.</p>
  
  <p><a href="https://i.stack.imgur.com/LPDs2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LPDs2.png" alt="Chrome Network tab"></a></p>
  
  <p>angular.json</p>
  
  <pre><code>"serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "push-web-app:build",
              "proxyConfig": "src/proxy-local.conf.json"
            },
           }
  </code></pre>