Proxying grafana com nginx funciona mas falha ao carregar arquivos grafana js

Question

Estou tentando integrar os painéis do Grafana em um aplicativo da web. O uso de URLs de grafana no aplicativo da Web falhou para erros de CORS. Depois de pesquisar no site da comunidade grafana descobriu que Grafana como não suporta e sugeriu usar um proxy reverso para se livrar do CORS. Então adicionei nginx. Eu poderia me livrar dos erros do CORS depois de adicionar a configuração necessária no arquivo nginx.conf, mas o Grafana ainda está falhando ao carregar. A seguir está a configuração e o problema que estou enfrentando -

• Usando o nginx-1.15.5 no Windows 10

A seguir estão as configurações na minha máquina -

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://localhost:3000/;
          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;          

       }
    }    
}

Aplicativo em execução em

http://localhost:9121/

tem o seguinte código de chamada de arquivo JSP para invocar o Grafana e mostrá-lo em um 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" />

O Grafana URL funciona sem problemas de CORS, mas falha ao carregar os arquivos grafana javascript. Não sei por que os arquivos js estão sendo examinados

http://localhost:9121

que está chamando o URL do aplicativo. Eles deveriam ter sido invocados com URL como

http://localhost/grafana/public/build/

A seguir, os registros do console de desenvolvimento do Chrome

20:24:33.392 XHR finished loading: OPTIONS "http://localhost/grafana/".
20:24:33.409 XHR finished loading: GET "http://localhost/grafana/".
20:24:33.411 XHR finished loading: OPTIONS "http://localhost/grafana/login".
20:24:33.449 XHR finished loading: GET "http://localhost/grafana/login".
20:24:33.451 VM25370 about:srcdoc:281 GET http://localhost:9121/grafana/public/build/vendor.4ad1072db19f1dad74f5.js net::ERR_ABORTED 404 (Not Found)
20:24:33.452 VM25370 about:srcdoc:269 GET http://localhost:9121/grafana/public/build/grafana.dark.css?v5.3.2+0d821d0 net::ERR_ABORTED 404 (Not Found)
20:24:33.456 VM25370 about:srcdoc:281 GET http://localhost:9121/grafana/public/build/app.4ad1072db19f1dad74f5.js net::ERR_ABORTED 404 (Not Found)

Precise da sua ajuda para entender o que está errado aqui e como fazê-lo funcionar.

    

Answer 1

Isso funcionou para mim depois de algumas mudanças. O primeiro deles é o mais importante que ajudou a corrigir esse problema.

1. Coloque o aplicativo da web bem atrás do proxy. Antes eu fazia o login no aplicativo da web usando o número da porta e depois de carregar a página de monitoramento, ele tentava carregar o grafana em um iframe usando o proxy reverso. Eu fiz muita depuração e tentei muitas alterações de configuração do ngnix para fazê-lo funcionar e, em seguida, pensei em adicionar uma regra de reescrita para enviar a solicitação para a grafana. E para isso eu tive que colocar o aplicativo por trás do proxy reverso também. Mas essa única mudança fez a diferença e não houve necessidade de adicionar nenhuma regra de reescrita. A seguir está o arquivo nginx.conf modificado

   worker_processes 1;  #error_log logs / error.log debug;  events {      worker_connections 1024;  }  http {      servidor {         ouça 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://localhost:3000/;          
       }
       location / {  
          proxy_pass http://localhost:9121/;          
       }      
    }    
   

   }

2. teve que corrigir o código da função com bugs para carregar o conteúdo da resposta no iframe. Aqui essa modificação modificada específica.

    success: function(data){
        var iframeDoc = $("#monitoringframe").get(0).contentDocument;
        iframeDoc.open();
        iframeDoc.write(data);
        iframeDoc.close();
    }