title: No 'Access-Control-Allow-Origin' header is present on the requested resource in Angular 11
body: <p>I'm new to Angular and I have an error in my Angular Application &quot;Access to XMLHttpRequest at 'http://localhost:4040/api/menus' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.&quot; This is for side bar menu items, load when user logging into the application which get by Backend api. I have add CORS policies but it still existing. Also I have shown multiple menu aip in Browser network only one menu link have <strong>&quot;OPTIONS&quot;</strong> and rest of getting 500 status error Code with <strong>&quot;GET&quot; method</strong>.I try api in Postman and it working fine not in browser. I have attached the images for the references. Here's my code</p>
  <p><strong>side-bar.component.html</strong></p>
  <pre><code>  &lt;div class=&quot;h-100 w-100 position-relative&quot;&gt;
    &lt;div class=&quot;row&quot; style=&quot;height: 100px; display: flex;&quot;&gt;
      &lt;div class=&quot;col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 mt-2 d-xl-none d-lg-none&quot; style=&quot;position: absolute; z-index: 100;&quot;&gt;
        &lt;fa-icon class=&quot;browse fa-lg cursor-pointer&quot; [icon]=&quot;backArrow&quot;  (click)=&quot;toggleSideBar()&quot;&gt;&lt;/fa-icon&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pl-5 pr-5 pt-3 text-center&quot;&gt;
        &lt;img src=&quot;/assets/img/logo.png&quot;  class=&quot;img-fluid w-75&quot; alt=&quot;Logo&quot;&gt;
        &lt;p class=&quot;text-center&quot;&gt;
          &lt;small&gt;Azbil Singapore&lt;/small&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot; style=&quot;height: calc(100vh - 140px); overflow-y: auto;&quot;&gt;
      &lt;div class=&quot;col-md-12 col-lg-12 col-xl-12 pl-0 pr-0&quot;&gt;
        &lt;ul class=&quot;menu top-level&quot; *ngIf=&quot;menuDataSet &amp;&amp; menuDataSet.length &gt; 0&quot;&gt;
          &lt;li *ngFor=&quot;let item of menuDataSet&quot;&gt;
            &lt;span class=&quot;pl-3 pt-2 pr-3 pb-2 d-block menu-item&quot; (click)=&quot;onMainItemSelected(item.url)&quot; [ngClass]=&quot;[item.subMenus.length != 0 ? 'inactive' : '', mainItemURL == item.url ? 'active': '']&quot; [routerLink]=&quot;item.url == '#' ? [] : [item.url]&quot; [innerHtml]=&quot;showProgress(item.item)&quot;&gt;&lt;/span&gt;
            &lt;ul *ngIf=&quot;item.subMenus.length &gt; 0&quot;&gt;
              &lt;li *ngFor=&quot;let subItem of item.subMenus&quot;&gt;
                &lt;span class=&quot;pl-5 pt-2 pr-3 pb-2 d-block menu-item sub-menu-item&quot; (click)=&quot;onSubItemSelected(subItem.url)&quot; [ngClass]=&quot;{'active': subItemURL == subItem.url}&quot; [routerLink]=&quot;subItem.url&quot; [innerHtml]=&quot;showProgress(subItem.item)&quot;&gt;&lt;/span&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
    &lt;p class=&quot;text-center footer-version&quot; (click)=&quot;openVersionModel()&quot;&gt;Version {{version}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Side-bar.component.ts</strong></p>
  <pre><code>  export class SideBarComponent implements OnInit, OnDestroy, AfterViewInit,OnChanges {
  
    private userName: string;
    private users: any[];
    public menuItemList = [];
  
    menuItems: any = [];
    backArrow = faArrowLeft;
    isSideMenuActive: boolean;
    version: string;
    mainItemURL: string;
    subItemURL: string;
    roleName: string;
    menuDataSet: any;
    
  
    arrowDown = faChevronCircleDown;
    arrowUp = faChevronCircleUp;
  
    constructor(
      private initialService: InitialService,
      private dataService: HttpService,
      private endPoints: InitialService,
      private headerService: HeaderService,
      private modalService: NgbModal,
      private router: Router,
      private httpClient: HttpClient,
      private auth: AuthService
      ) {
      this.headerService.isSideBarActive.subscribe(isActive =&gt; {
        this.isSideMenuActive = isActive;
      });
      this.version = this.initialService.getVersion();
    }
    ngOnChanges(changes: SimpleChanges): void {
      if (changes.menuDataSet) {
        console.log('change');
        this.roleName = localStorage.getItem('roleName');
        this.getRoles();
      }
    }
    ngOnDestroy(): void {
      throw new Error('Method not implemented.');
    }
    
    ngAfterViewInit(): void {
      this.roleName = localStorage.getItem('roleName');
      this.getRoles();
    }
  
    ngOnInit() {
        this.userName = localStorage.getItem('user');
        this.roleName = localStorage.getItem('roleName');
        
        this.getRoles();
        //this.getUsers();
        this.auth.getMenus().subscribe((res: any)=&gt;{
          alert(res);
          this.menuItems = res
          res.forEach((e: any) =&gt; {
            // alert(e);
          },
            (error: any) =&gt;console.log(&quot;Error&quot;, error));
        })
        
    
      }
  
    getRoles() {    
      this.getMenu();
    }
  
  
    onMainItemSelected(item: string) {
      this.subItemURL = '';
      if (item != '#') {
        this.mainItemURL = item;
      }
    }
    onSubItemSelected(item: string) {
      this.mainItemURL = '';
      if (item != '#') {
        this.subItemURL = item;
      }
    }
  
    toggleSideBar() {
      this.headerService.toggleSideBar();    
    }
  
    showProgress(item: any) {
      switch (item) {
        default:
          return item;
      }
    }
  
    openVersionModel() {
      const modal = this.modalService.open(VersionComponent, { size: 'lg', scrollable: true});
      modal.componentInstance.title = &quot;Locations&quot;;
    }
  
    public getMenu(){
      const details = JSON.parse(localStorage.getItem('token'));
      console.log(&quot;token&quot;);
      console.log(details);
      const header = new HttpHeaders().set('Authorization', 'Bearer ' + details);
      const headers = { headers: header };
      console.log('responseOK');
      this.httpClient.get('http://localhost:4200/api/menus', headers).subscribe(data =&gt; {
        this.menuDataSet = data;
        console.log(this.menuDataSet);
      });
    }
  }
  </code></pre>
  <p><strong>auth.service.ts</strong></p>
  <pre><code>getMenus(){
    const details  = localStorage.getItem('token');
    const header = new HttpHeaders().set('Authorization', 'Bearer ' + details);
    const headers = { headers: header };
    return this.httpClient.get('http://localhost:4040/api/menus', headers);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Lhjda.png" rel="nofollow noreferrer">This the OPTIONS with working api but i don't have any OPTIONS method</a></p>
  <p><a href="https://i.stack.imgur.com/qj70V.png" rel="nofollow noreferrer">Error with 404.</a><a href="https://i.stack.imgur.com/IwSvv.png" rel="nofollow noreferrer">Error with 500</a></p>
  <p>Any opinion and solution why I'm having this?</p>