title: I am getting CORS issue in Angular 5 app even though i get response from the server
body: <p>I am using Angular 5 in my ionic app. I am trying to call a endpoint from my code </p>
  
  <pre><code>ngOnInit(): void {
      //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
      //Add 'implements OnInit' to the class.
      this.httpClient.get('https://abc-66b76.cloudfunctions.net/getBillNo', {
          headers: {
              'Access-Control-Allow-Origin': '*'
          }
      }).subscribe(data =&gt; {
          console.log('firebase bill No: ', data);
          this.bill.billNo = data.billNo;
      })
  }
  </code></pre>
  
  <p>When my page loads the above code is called and in chrome browser console i get the  below error:</p>
  
  <blockquote>
    <p>Failed to load <a href="https://abc-66b76.cloudfunctions.net/getBillNo" rel="nofollow noreferrer">https://abc-66b76.cloudfunctions.net/getBillNo</a>: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:8100" rel="nofollow noreferrer">http://localhost:8100</a>' is therefore not allowed access.</p>
  </blockquote>
  
  <p>However if i check my network tab in my chrome browser i can see that it has hit the server and has got the response.</p>
  
  <p><a href="https://i.stack.imgur.com/R4ET2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R4ET2.png" alt="enter image description here"></a></p>
  
  <p>Can anyone help me resolve this.</p>
  
  <blockquote>
    <p><strong>My Backend is firebase functions</strong>.</p>
  </blockquote>