Proxying grafana with nginx works but fails to load grafana js files

1

I am trying to integrate Grafana dashboards in a web application. The use of grafana URLs in the web app was failing for CORS errors. After searching on grafana community website found that Grafana as not support and suggested to use a reverse proxy to get rid of the CORS. So added nginx. I could get rid of the CORS errors after adding the required config in nginx.conf file but the Grafana is still failing to load. Following is the config and the problem I am facing -

  • Using nginx-1.15.5 on windows 10

Following are the configs on my machine -

grafana custom.ini

http_port = 3000
domain = localhost
root_url = %(protocol)s://%(domain)s/grafana/

nginx.conf

worker_processes  1;
error_log  logs/error.log debug;
events {
    worker_connections  1024;
}
http {
    server {
       listen 80;
       root C:\\installables\\nginx-1.15.5\\www;
       index index.html index.htm;
       server_name localhost;      

       location /grafana/ {       

          proxy_pass http://grafana.staged-by-discourse.com/;
          rewrite  ^/grafana/(.*)  /$1 break;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          if ($request_method = 'OPTIONS') {
             add_header 'Access-Control-Allow-Origin' "*";
             #add_header 'Access-Control-Allow-Credentials' 'true' always;
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
             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;
            return 204;
           }             

           add_header 'Access-Control-Allow-Origin' "*";
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
           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;
           add_header 'Access-Control-Expose-Headers' 'Content-Type,Content-Length,Content-Range';

           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;          

       }
    }    
}

Application running on

http://localhost:9121/

has following JSP file calling code to invoke the Grafana and show it in an iframe.

<script language="javaScript">
    $.ajax({
        type: "GET", 
        url: "http://localhost/grafana/",
        contentType: "application/json",
        xhrFields: {
            withCredentials: false
        },
        headers: {
            // Set any custom headers here.
        },        
        success: function(data){
            $("#monitoringframe").attr('srcdoc',data)
        },
        error : function(err) {
            console.log('Error!', err)
        }            
    });
</script>

<iframe name="monitoringframe" id="monitoringframe" src="about:blank" sandbox="allow-forms allow-popups allow-same-origin allow-scripts" width=100% height=600 border="0" frameborder="0" />

Grafana URL works with no CORS issues but fails while loading the grafana javascript files. I am not sure why the js files are being looked over

info1
info11672×346 117 KB

Need your help to understand what is wrong here and how to make it work.

2

Hi,

This worked for me after a couple of changes.

  1. Put the application as well behind the proxy.

     worker_processes  1;

 #error_log  logs/error.log debug;

 events {
     worker_connections  1024;
 }

 http {

     server {
        listen 80;
       
        root C:\\installables\\nginx-1.15.5\\www;
        index index.html index.htm;
        server_name localhost;
        
        location /grafana/ {       
             
            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.staged-by-discourse.com/;          
            
        }
 	   
        location / {  
             
           proxy_pass http://localhost:9121/;          
            
        }	   
     }    
 }

  2. correct the JSP code to load the content properly

     <script language="javaScript">
     $.ajax({
         type: "GET", 
         url: "https://localhost/grafana/d/ICrAszxmk/pod-1?orgId=1&var-affiliate=defaultAffiliate",
         Accept: "application/json",
         xhrFields: {
             withCredentials: true
         },
         headers: {
             "Authorization": "Bearer eyJrIjoiNWRDM242ZEJNTk5YbmpCR0ZvZldxQ2pybnNoYUl4U2UiLCJuIjoiZGVmYXVsdF92aWV3ZXIiLCJpZCI6MX0="
         },        
         success: function(data){
             var iframeDoc = $("#monitoringframe").get(0).contentDocument;
             iframeDoc.open();
             iframeDoc.write(data);
             iframeDoc.close();
         },
         error : function(err) {
             console.log('Error!', err)
         }            
     });
 </script>


 <iframe name="monitoringframe" id="monitoringframe" sandbox="allow-forms allow-popups allow-same-origin allow-scripts" width=100% height=600 border="0" frameborder="0" ></iframe>

I still need to work on the login part using the bearer token and now trying to figure that out.

Thanks!