CORS blocking get request in code but directly accessing endpoint returns data

I have an angular front end website that is trying to hit an endpoint on a webserver. At this point the website is in a proof of concept phase. Here’s the request:

constructor(private http: HttpClient) { }

getData(): Observable<any> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': 'http://localhost:4200'
    });
    return this.http.get(`${this.apiUrl}`, { headers: headers, withCredentials: true}); }

When I directly paste the endpoint URL into the browser I get an XML response with the data. So what is wrong with the request that it is blocked by CORS when running through my webpage but if I paste the URL in the same browser it returns a result?