Проксирование Grafana с помощью Nginx работает, но не удается загрузить файлы js Grafana.

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

• Использую nginx-1.15.5 на Windows 10

Вот конфигурации на моем компьютере –

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;          

       }
    }    
}

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

http://localhost:9121/

имеет следующий файл JSP с кодом для вызова Grafana и отображения ее в iframe.

<script language="javaScript">
    $.ajax({
        type: "GET", 
        url: "http://localhost/grafana/",
        contentType: "application/json",
        xhrFields: {
            withCredentials: false
        },
        headers: {
            // Установите здесь любые пользовательские заголовки.
        },        
        success: function(data){
            $("#monitoringframe").attr('srcdoc',data)
        },
        error : function(err) {
            console.log('Ошибка!', err)
        }            
    });
</script>

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

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

http://localhost:9121

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

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

Следующие журналы из консоли разработчика Chrome

20:24:33.392 XHR завершил загрузку: OPTIONS "http://localhost/grafana/".
20:24:33.409 XHR завершил загрузку: GET "http://localhost/grafana/".
20:24:33.411 XHR завершил загрузку: OPTIONS "http://localhost/grafana/login".
20:24:33.449 XHR завершил загрузку: 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 (Не найдено)
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 (Не найдено)
20:24:33.456 VM25370 about:srcdoc:281 GET http://localhost:9121/grafana/public/build/app.4ad1072db19f1dad74f5.js net::ERR_ABORTED 404 (Не найдено)

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

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

1. Расположите веб-приложение также за прокси. Ранее я входил в веб-приложение, используя номер порта, а затем после загрузки страницы мониторинга оно пыталось загрузить grafana в iframe, используя обратный прокси. Я провел много отладки и попыток изменений конфигурации ngnix, чтобы это сработало, и затем подумал о добавлении правила перезаписи, чтобы отправить запрос в 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_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. Мне пришлось исправить ошибочную функцию, чтобы загрузить содержимое ответа в iframe. Вот это конкретное измененное изменение.

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