Downloading a file from an HTTP Get endpoint in Angular

Question

Im trying to download a file from a get endpoint I have in my backend,

Im able to get the blob object but when I try to open the pdf file I see this error:

This is my service

  public getExpertBio(crssid: string): any {
    const headersOptions =  {
      "X-Expert-CrssId": crssid,
    }
    const url = `applicationURL/${crssid}`
    return this.http.get(url, { 
      headers: headersOptions,
      withCredentials: true,
      responseType: 'blob' as 'json',
      observe: 'response'
    })
  }

And this is the function that calls that service

public downloadBio(){
        try {
        this.ApiService.getExpertBio(crssid)
        .subscribe(
          (response:any) => {
            const blob = new Blob([response.body], { type: 'application/pdf' })
            console.log(blob)  // Blob {size: 302715, type: 'application/pdf'} 'this is the blob'
            const fileURL = window.URL.createObjectURL(blob)
            console.log(fileURL) // blob:http://localhost:9000/73ef33f8-1f10-410c-a960-77d23175b722 this is the fileURL
            window.open(fileURL, '_blank')
          },
          (error) => {
            console.log('downloadBio error: ',error);
          }
        );
      } catch (error) {
        console.log(error);
      }
}

I have tried with different solutions in a couple of stackoverflow solutions but havent been able to make the download work,

Im also new to Angular, so Im open to hear any comments, thoughts or ideas.