Прокси-графана с помощью nginx работает, но не может загрузить js-файлы grafana
Я пытаюсь интегрировать информационные панели 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;
}
}
}
Приложение работает на
имеет следующий код вызова файла 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 просматриваются
который вызывает URL приложения. Они должны были быть вызваны с URL-адресом, как
Ниже приведены журналы с консоли разработчика 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)
Нужна ваша помощь, чтобы понять, что здесь не так и как заставить это работать.
1 ответ
Это сработало для меня после нескольких изменений. Первый из них - важный, который помог решить эту проблему.
Поместите веб-приложение также за прокси. Ранее я входил в веб-приложение, используя номер порта, а затем, после загрузки страницы мониторинга, он пытался загрузить графану в iframe, используя обратный прокси-сервер. Я сделал много отладок и попробовал так много изменений конфигурации ngnix, чтобы он заработал, а затем подумал о добавлении правила перезаписи, чтобы отправить запрос в grafana. И для этого мне пришлось поместить приложение за обратным прокси-сервером. Но это единственное изменение имело значение, и не было необходимости добавлять какое-либо правило перезаписи. Ниже приведен измененный файл nginx.conf
рабочий_процесс 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/; } }}
пришлось исправить ошибочный код функции для загрузки содержимого ответа в iframe. Вот это конкретное измененное изменение.
success: function(data){ var iframeDoc = $("#monitoringframe").get(0).contentDocument; iframeDoc.open(); iframeDoc.write(data); iframeDoc.close(); }