Назад | Перейти на главную страницу

Проксирование графаны с помощью nginx работает, но не может загрузить файлы grafana js

Я пытаюсь интегрировать панели управления Grafana в веб-приложение. Использование URL-адресов графаны в веб-приложении приводило к ошибкам CORS. После поиска на сайте сообщества Grafana обнаружил, что Grafana не поддерживает и предложил использовать обратный прокси, чтобы избавиться от CORS. Итак, добавлен nginx. Я мог избавиться от ошибок CORS после добавления необходимой конфигурации в файл nginx.conf, но Grafana все еще не загружается. Ниже приведены конфигурация и проблема, с которой я столкнулся:

Использование nginx-1.15.5 в Windows 10

Ниже приведены конфигурации на моей машине -

графана 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;          

       }
    }    
}

Приложение работает на

http: // локальный: 9121 /

имеет следующий код вызова файла JSP для вызова Grafana и отображения его в 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" />

URL-адрес Grafana работает без проблем с CORS, но не работает при загрузке файлов javascript Grafana. Я не уверен, почему просматриваются файлы js

http: // локальный: 9121

который вызывает URL-адрес приложения. Их нужно было вызывать с URL-адресом вида

http: // локальный / графана / общедоступный / сборка /

Ниже приведены журналы из консоли разработчика 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)

Нужна ваша помощь, чтобы понять, что здесь не так и как заставить его работать.

Это сработало для меня после пары изменений. Первый из них был важным, который помог решить эту проблему.

Поместите веб-приложение также за прокси. Раньше я входил в веб-приложение, используя номер порта, а затем после загрузки страницы мониторинга он пытался загрузить графану в iframe с помощью обратного прокси. Я провел много отладки и попробовал так много изменений конфигурации ngnix, чтобы заставить его работать, а затем подумал о добавлении правила перезаписи для отправки запроса в grafana. И для этого мне также пришлось разместить приложение за обратным прокси. Но это единственное изменение имело значение, и не было необходимости добавлять какие-либо правила перезаписи. Ниже приведен измененный файл nginx.conf.

worker_processes 1; #error_log logs / error.log debug; события {worker_connections 1024; } http {сервер {слушать 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/;          
    }      
 }

}

пришлось исправить ошибочный код функции, чтобы загрузить содержимое ответа в iframe. Вот то конкретное модифицированное изменение.
```
 success: function(data){
     var iframeDoc = $("#monitoringframe").get(0).contentDocument;
     iframeDoc.open();
     iframeDoc.write(data);
     iframeDoc.close();
 }
```