He agregado el CORS en el encabezado pero todavía recibo el problema CORS en mi solicitud. ¿Cuál es la forma correcta de agregar y manejar CORS y otras solicitudes en los encabezados?

Aquí está el código del archivo de servicio:

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

Error:

La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay encabezado 'Access-Control-Allow-Origin' en el recurso solicitado. Origen 'http: // localhost: 4200'por lo tanto no se permite el acceso

falló: respuesta de falla HTTP para (URL desconocida): 0 Error desconocido

En mi código del lado del servidor, agregué CORS en el archivo de índice.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');