Grafana 通过 AJAX 没有响应 [英] No response from Grafana via AJAX
问题描述
我在 Docker 容器(来自 Docker 存储库的 grafana/grafana
映像)中设置了 Grafana,端口 3000 转发到我的本地主机.我的docker-compose.yml
如下:
I have Grafana set up in a Docker container (grafana/grafana
image from Docker repo) with port 3000 forwarded to my localhost. My docker-compose.yml
below:
version: '2.1'
services:
grafana:
image: grafana/grafana
ports:
- 3000:3000
最初我也有指向 Graphite 和一些卷和环境配置的链接(仅限 GF_SECURITY_ADMIN_PASSWORD
),但我认为这无关紧要.
Originally I also have link to Graphite and some volumes and environment configuration (GF_SECURITY_ADMIN_PASSWORD
only) but I suppose it does not matter.
我可以通过简单的 curl
调用从 Grafana 获得响应:
I can get a response from Grafana via simple curl
call:
$ curl http://localhost:3000
<a href="/login">Found</a>.
但是当我尝试通过 AJAX 调用获取它时,它给了我一个奇怪的结果:
But when I am trying to get it via AJAX call, it gives me a weird result:
$.ajax({url: 'http://localhost:3000', beforeSend: function(xhr, settings) {alert('before setting header'); xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); alert('after setting header');}});
[many JSON fields]
responseText:""
[many JSON fields]
statusText: "error"
[many JSON fields]
警报表示标头设置为接受来自任何来源的请求.
Alerts says that header is set to accept requests from any origin.
当我直接调用 Docker 容器地址时,也会发生同样的情况(curl 有效但 ajax 无效).
The same happens (curl works but ajax not) when I am calling Docker container address directly.
后台发生了什么?为什么第二个请求不起作用?如何通过 AJAX 调用从 Grafana 获得响应?
What happens in the background? Why the second request does not work? How can I get response from Grafana via AJAX call?
推荐答案
问题是默认情况下在 grafana 上未启用 CORS.curl 请求不会检查 CORS,但浏览器会检查.保护一个站点调用其他站点的API.
The issue is the by default CORS is not enabled on grafana. A curl request doesn't check for CORS but a browser does. It is what protect one site to call API of other sites.
所以您的解决方案是在 Grafana 前面放置一个反向 nginx 代理.下面是相同的 docker-compose.yml
So your solution would be to put a reverse nginx proxy in front of Grafana. Below is the docker-compose.yml
for the same
version: '2.1'
services:
grafana:
image: grafana/grafana
nginx:
image: nginx
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
ports:
- "3000:80"
并且在nginx配置下面会添加CORS,但它是非常开放的,每个人都可以访问
And below nginx config will add CORS to it, but it is very open would allow everyone access
events {
worker_connections 1024;
}
http {
#
# Acts as a nginx HTTPS proxy server
# enabling CORS only to domains matched by regex
# /https?://.*.mckinsey.com(:[0-9]+)?)/
#
# Based on:
# * http://blog.themillhousegroup.com/2013/05/nginx-as-cors-enabled-https-proxy.html
# * http://enable-cors.org/server_nginx.html
#
server {
listen 80;
location / {
#if ($http_origin ~* (https?://.*.tarunlalwani.com(:[0-9]+)?$)) {
# set $cors "1";
#}
set $cors "1";
# OPTIONS indicates a CORS pre-flight request
if ($request_method = 'OPTIONS') {
set $cors "${cors}o";
}
# Append CORS headers to any request from
# allowed CORS domain, except OPTIONS
if ($cors = "1") {
add_header Access-Control-Allow-Origin $http_origin always;
add_header Access-Control-Allow-Credentials true always;
proxy_pass http://grafana:3000;
}
# OPTIONS (pre-flight) request from allowed
# CORS domain. return response directly
if ($cors = "1o") {
add_header 'Access-Control-Allow-Origin' '$http_origin' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Origin,Content-Type,Accept' always;
add_header Content-Length 0;
add_header Content-Type text/plain;
return 204;
}
# Requests from non-allowed CORS domains
proxy_pass http://grafana:3000;
}
}
}
同样用于测试,你不应该使用
Also for test you should not use
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
删除并测试它应该可以工作
Remove that and test and it should work
这篇关于Grafana 通过 AJAX 没有响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!