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.
-
Reverse proxy settings is configured properly.
-
Set serve_from_sub_path to true in grafana.
NGINX.config
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”;
}
Grafana.ini
[server]
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) => {
console.log(URL.createObjectURL(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
