angular - 无法使用 Nginx 在反向代理服务器上嵌入 Kibana

Question

我正在尝试在 Nginx 反向代理上嵌入 Kibana 仪表板，在我的 Angular 应用程序中使用 iframe，但一直出现空白屏幕。不会抛出任何错误（除了预期的“内联脚本”错误），但不会加载任何内容。Kibana 部署在 Azure 云上，我没有管理员权限，因此无法编辑 .yaml 文件。这是我的 Nginx 配置文件：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass http://localhost:8080/<client>/api;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
        }

        location /kibana/ {
            add_header X-my-debug $http_referer;
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/;
            sub_filter_once     off;
            sub_filter          'src="bootstrap.js'  'src="/kibana/bootstrap.js';
            proxy_set_header    X-Real-IP $remote_addr;
            proxy_set_header    Authorization '<auth-info>';
            proxy_set_header    X-Found-Cluster cbca73a5db19409287b3e17ef1a3df82;
            proxy_set_header    Host $host;
            proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header    X-Forwarded-Proto $scheme;
            proxy_set_header    Connection "Keep-Alive";
            proxy_set_header    Proxy-Connection "Keep-Alive";
            proxy_redirect    off;
            add_header          Content-Security-Policy "script-src 'self' <company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline' 'unsafe-eval';" always;
        }

        location /bootstrap.js {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/bootstrap.js;
            add_header          Content-Security-Policy "script-src 'self' https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline' 'unsafe-eval';" always;
        }

        location /39457/ {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/39457/;
            add_header          Content-Security-Policy "script-src 'self' https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline' 'unsafe-eval';" always;
        }

        location /translations/ {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/translations/;
        }

        location /node_modules/@kbn/ui-framework/dist/kui_light.css {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/node_modules/@kbn/ui-framework/dist/kui_light.css;
        }

        location /ui/legacy_light_theme.css {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/ui/legacy_light_theme.css;
        }
        
        location /api/core/capabilities {
            proxy_pass         https://<company-name>.azure.elastic-cloud.com:<port>/api/core/capabilities;
        }

        location /ui/fonts/inter_ui/ {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/ui/fonts/inter_ui/;
        }
        
        location /internal/ {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/internal/;
        }

        location /api/licensing/info {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/api/licensing/info;
        }

        location /api/saved_objects_tagging/tags {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/api/saved_objects_tagging/tags;
        }

        location /logout {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/logout;
        }

        location /api/ui_counters/_report {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/api/ui_counters/_report;
        }

        location /api/security/logout {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/api/security/logout;
        }

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
    }

}

我的 index.html 中也有这个：

<meta http-equiv="Content-Security-Policy" 
  content="
  script-src 'self' https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline' 'unsafe-eval';
  frame-src 'self'https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline';
  style-src 'self' https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline';"
  >

标签： angularnginxiframekibanareverse-proxy