I am trying to call an x-api-key in the header of an angular service but am missing something in the syntax. So far my code spits out an authorization error.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class PrecipForecastService {

  constructor(private http:HttpClient) { }

  getData () {
    const url = 'url_here';
    const key = 'key_here';
    const header = new HttpHeaders({'x-api-key': key});
    return this.http.get(url, {headers: header});
  }
}

The browser's network tab shows:

Access to XMLHttpRequest at 'url_here' from origin 'localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Yes the key is correct, it worked with the JS fetch module.

Thanks for the help!