使用 nginx 代理 grafana 可以工作，但无法加载 grafana js 文件

Question

我正在尝试将 Grafana 仪表板集成到 Web 应用程序中。由于 CORS 错误，Web 应用程序中使用 grafana URL 失败。在 grafana 社区网站上搜索后发现，Grafana 不支持，并建议使用反向代理来摆脱 CORS。所以添加了 nginx。在 nginx.conf 文件中添加所需的配置后，我可以摆脱 CORS 错误，但 Grafana 仍然无法加载。以下是配置和我面临的问题 -

• 在 Windows 10 上使用 nginx-1.15.5

以下是我的机器上的配置 -

grafana 自定义.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" />

Grafana URL 可以正常工作，没有 CORS 问题，但在加载 grafana javascript 文件时失败。我不确定为什么要检查 js 文件

http://本地主机:9121

调用应用程序 URL。它们应该使用类似这样的 URL 进行调用

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

以下是 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)

需要您的帮助来了解这里出了什么问题以及如何使其发挥作用。

Answer 1

经过几次更改后，它对我有用。第一个更改很重要，它帮助解决了这个问题。

1. 将 Web 应用程序也放在代理后面。之前我使用端口号登录 Web 应用程序，然后在加载监控页面后，它尝试使用反向代理将 Grafana 加载到 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/;          
       }      
    }    
   

   }

2. 必须修正在 iframe 中加载响应内容的有缺陷的函数代码。这里是具体修改的变更。

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