I’m try to embed Grafana panels into Vue.js app. Grafana is proxied by Nginx (I have two docker images: one with grafana and second contains nginx with jwt authenticantion. Both are manage by docker-compose file and work on EC2 instance with public dns). The proxing part work great, I get access to grafana using JWT token (by ModeHeader plug in for Chrome) but when I embed iframe into vue.js app (of course i also use this token in iframe) I get problem with js files loading because iframe try to download files from vue.js URL, not from grafana.
I tried a lot of configurations of grafana.ini but everything not working.
When I built simple html file on my pc that only contains the iframe and open it using chrom with header with jwt iframe works fine.
Errors:
Main part of Nginx config:
http {
server {
access_log /dev/stdout;
listen 80;
server_name nginx-revers-proxy;
location ~ /\.ht {
deny all;
}
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Expose-Headers' 'Content-Type,Content-Length,Content-Range';
add_header 'Access-Control-Allow-Headers'
'Accept,
Authorization,
Cache-Control,
Content-Type,
DNT,
If-Modified-Since,
Keep-Alive,
Origin,
User-Agent,
X-Requested-With' always;
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_pass http://grafana:3000/;
proxy_set_header X-WEBAUTH-USER "admin";
proxy_set_header Authorization "";
}
}
}
daemon off;
Environment variables in docker-compose file:
environment:
- GF_AUTH_BASIC_ENABLED=false
- GF_AUTH_PROXY_AUTO_SIGN_UP=false
- GF_AUTH_PROXY_ENABLED=true
- GF_AUTH_PROXY_ENABLE_LOGIN_TOKEN=true
- GF_AUTH_PROXY_HEADER_NAME=X-WEBAUTH-USER
- GF_AUTH_PROXY_HEADER_PROPERTY=username
- GF_INSTALL_PLUGINS=grafana-piechart-panel
- GF_SECURITY_ALLOW_EMBEDDING=true
- GF_SERVER_DOMAIN=ec2_instance_domain(e.g. ec2-11-11-1-111.eu-west-2.compute.amazonaws.com)
- GF_SERVER_ROOT_URL=ec2_instance_url(e.g. http://ec2-11-11-1-111.eu-west-2.compute.amazonaws.com)
I also try to setup the vue.js app url and domain in GF_SERVER_DOMAIN and GF_SERVER_ROOT_URL but its also doesn’t working…