XML response gets blocked by CORS on angular 10

Question

I was working with an API which was giving me xml repsponse but unfortunately i'm not being able to retrieve the xml response. I get CORS issue on my browser through my angular app. But i can get the response from both the browser and also from postman.
I just need to get the xml response.
Here is my code

import { Component } from '@angular/core';
import { xml2js } from 'xml2js';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private http: HttpClient) {}
  httpData;
  public xmlItems: any;

  ApiUser = '***';
  domain_name = 'website.com';
  ApiKey = '*****';
  Command = '****';
  ClientIp = '*********';
  ngOnInit() {
    this.http
      .get(
        `https://api.namecheap.com/xml.response?ApiUser=${this.ApiUser}&ApiKey=${this.ApiKey}&UserName=*****&ClientIp=${this.ClientIp}&Command=${this.Command}&DomainList=${this.domain_name}`,
        {
          headers: new HttpHeaders()
            .set('Content-Type', 'text/xml')
            .append('Access-Control-Allow-Methods', 'GET')
            .append('Access-Control-Allow-Origin', '*')
            .append(
              'Access-Control-Allow-Headers',
              'Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method'
            ),
          responseType: 'text',
        }
      )
      .subscribe((data) => {
        this.parseXML(data).then((data) => {
          this.xmlItems = data;
        });
      });
  }

  parseXML(data) {
    return new Promise((resolve) => {
      var k: string | number,
        arr = [],
        parser = new xml2js.Parser({
          trim: true,
          explicitArray: true,
        });
      parser.parseString(data, function (err, result) {
        var obj = result.ApiResponse;
        for (k in obj.CommandResponse) {
          var item = obj.CommandResponse[k];
          arr.push({
            info: item.DomainCheckResult[0],
          });
        }
        resolve(arr);
      });
    });
  }
}

My modules

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

html file

<ul *ngFor="let item of xmlItems">
  <li>{{ item.DomainCheckResult }}</li>
</ul>

So this is all the codes. I get Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api..... and also this error (Reason: CORS request did not succeed) Could anyone help me why i'm not getting the response while i declared all the headers and gave appropiate credintials. Thanks in Advance.