Hi,
I am trying to show grafana dashboard or charts in my web application,
I read a lot of topics in Grafana community about this issue and nothing fixed my issue.
Below are my configurations and my full implementation.
I get 200 Ok response and I can see below info in the response.
Below is my nginx configuration
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
root /usr/share/nginx/html;
index index.html index.htm;
server_name localhost;
location / {
proxy_set_header Host $http_host;
proxy_set_header X-WEBAUTH-USER $remote_user;
proxy_pass http://grafana.staged-by-discourse.com/;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' '*' always;
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
}
}
location /api/live {
rewrite ^/(.*) /$1 break;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_set_header Host $http_host;
proxy_pass http://grafana.staged-by-discourse.com/;
}
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/localhost/fullchain.pem; # managed by
Certbot
ssl_certificate_key /etc/letsencrypt/live/localhost/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
grfana.ini
[security]
cookie_secure = true
cookie_samesite = none
allow_embedding = true
[auth.basic]
enabled = true
[auth.proxy]
enabled = true
header_name = X-WEBAUTH-USER
header_property = username
auto_sign_up = true
sync_ttl = 60
my frontend html code (angular)
<div [innerHTML]="grafanaData" >
</div>
service.ts file(angular)
getGrfanaData(url:string) {
return this.http.get(url, {
headers: new HttpHeaders().set("X-WEBAUTH-USER", this.username)
.set("Content-Type", "application/json"),responseType:'text'
});
}
output
Please don’t send me the generic links. please paste your answer below.