Handling CORS in Angular for security

Demonstrate the best practices to handle Cross-Origin Resource Sharing (CORS) in Angular to prevent unauthorized API access.
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

export class CORSInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Clone the request to add the new header.
    const corsReq = req.clone({
      headers: req.headers.set('Access-Control-Allow-Origin', '*')

    // Send the newly created request
    return next.handle(corsReq);
This is a basic example of an Angular HTTP Interceptor that modifies outgoing HTTP requests to include the 'Access-Control-Allow-Origin' header. However, setting the header on the client-side does not address security or proper CORS handling. CORS policies should be managed server-side.
// In your module (e.g., app.module.ts)
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CORSInterceptor } from './cors.interceptor'; // adjust the path to where your interceptor is

  declarations: [
    // your components here
  imports: [
    // other imports here
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CORSInterceptor, multi: true },
    // other providers here
  bootstrap: [AppComponent]
export class AppModule { }
This code is meant to be placed in an Angular module to provide the CORSInterceptor service globally by adding it to the HTTP_INTERCEPTORS array. This sets up the interceptor to process all outgoing HTTP requests.