Proxing Grafana with Nginx fails to load js files in Vue.js App

Grafana Configuration
1

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:

image
image

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…