Facing issue while embeding grafana iframe in Angular with Token authentication

Hi Team @bergquist @torkel @daniellee
I configured grafana behind reverse proxy[nginx]. I enabled Auth proxy, enabled CORS and ssl configured for nginx. I want to embed Grafana iframe into Angular application with token authentication.

  1. Reverse proxy settings is configured properly.

  2. Set serve_from_sub_path to true in grafana.

server {
root /usr/share/nginx/www;
index index.html index.htm;
location /grafana/
include cors-settings.conf;
rewrite ^/grafana/(.*) /$1 break;
proxy_set_header Host $http_host;
proxy_pass http://grafana;
proxy_set_header Authorization “Basic YWRtaW46”;

protocol = http
http_port = 3000
domain = test.com
enforce_domain = false
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana/
serve_from_sub_path = true

Angular Typescript.cs
public setGrafanaIframe() {
var t=YWRtaW46;
var getGrafanaUrl=‘http://test.com/grafana/d/ZmqS29WVk/ade?orgId=1&from=now-2y&to=now
let randomSeed = “&random=” + (new Date()).getTime() + new Date(); //Random number added to URL params to prevent browser from caching iframe content
let headers = new HttpHeaders();
headers = headers.set(‘TOKEN…’,t);
let url = getGrafanaUrl.toString() + randomSeed
this.http.get(url, { responseType: ‘blob’, headers: headers }).subscribe((response) => {
this.iframe.nativeElement.src = URL.createObjectURL(response)

But getting the following error while embeded in Angular application.

Highly Appreciate for valuable input, the exact cause of an error. Need help on this