title: CORS policy error with angular 11 and php api
body: <p>Here is my angular --version log</p>
  <pre><code>Angular CLI: 11.1.2
  Node: 10.19.0
  OS: linux x64
  
  Angular: 11.1.1
  ... animations, common, compiler, compiler-cli, core, forms
  ... platform-browser, platform-browser-dynamic, router
  Ivy Workspace: Yes
  
  Package                         Version
  ---------------------------------------------------------
  @angular-devkit/architect       0.1101.2
  @angular-devkit/build-angular   0.1101.2
  @angular-devkit/core            11.1.2
  @angular-devkit/schematics      11.1.2
  @angular/cli                    11.1.2
  @schematics/angular             11.1.2
  @schematics/update              0.1101.2
  rxjs                            6.6.3
  typescript                      4.1.3
  </code></pre>
  <p>I am using PHP (Codeigniter) as my server-side language running on apache2.</p>
  <p>I want to call an API from angular with auth headers and X API key.
  Here is my angular code.</p>
  <pre><code>import { HttpClient, HttpHeaders } from '@angular/common/http';
  // import {Http, Headers} from '@angular/http';
  
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    constructor(private http:HttpClient){
  
    }
    title = 'My First Application';
  
  
    apiCheck(){
      const httpOptions = {
        headers: new HttpHeaders()
          .set('Authorization','Basic YWRtaW46MTIzNA==')
          .set(&quot;x-api-key&quot;,&quot;sdfasdfasdfsadfsadfsdaf&quot;)
          .set(&quot;token&quot;,&quot;sadfsadfasdf&quot;)
          .set(&quot;Content-Type&quot;,&quot;application/json&quot;)
          
        
      }
    let request = this.http.get('http://localhost/ci/index.php/api/V1/againTest', httpOptions);
     request.subscribe(
        data=&gt;{
            console.log(data);
        }
     );
    }
  }
  </code></pre>
  <p>This is working fine when I request this API from Postman. But got this error when I called this API from the angular end.</p>
  <p><a href="https://i.stack.imgur.com/UKfYN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UKfYN.png" alt="enter image description here" /></a></p>
  <p>I have enabled the cors from the server end by adding this.</p>
  <pre><code>header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: *');
  header('Access-Control-Allow-Headers: *');
  </code></pre>
  <p>I have tried with the documentation for proxy setting also <a href="https://angular.io/guide/build#proxying-to-a-backend-server" rel="nofollow noreferrer">https://angular.io/guide/build#proxying-to-a-backend-server</a></p>
  <p>here is my proxy.conf.json</p>
  <pre><code>{
      &quot;/api/*&quot;: {
        &quot;target&quot;: &quot;http://localhost&quot;,
        &quot;secure&quot;: false,
        &quot;logLevel&quot;: &quot;debug&quot;,
        &quot;changeOrigin&quot;: true
      }
    }
  </code></pre>
  <p>add register it on angular.json file.</p>
  <pre><code>&quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;my-dream-app:build&quot;,
              &quot;proxyConfig&quot;: &quot;./proxy.conf.json&quot;
            },
  </code></pre>
  <p>I have not found any working answer from anywhere.
  Thanks in advance for your help.</p>