Grafana没有通过AJAX做出回应

我有Grafana设置在一个Docker容器(来自Docker repo的grafana/grafana图像),并将端口3000转发到我的本地主机。 我docker-compose.yml如下:

 version: '2.1' services: grafana: image: grafana/grafana ports: - 3000:3000 

最初我也有链接到Graphite和一些卷和环境configuration(只有GF_SECURITY_ADMIN_PASSWORD ),但我想这没有关系。

我可以通过简单的curl调用来获得Grafana的回复:

 $ curl http://localhost:3000 <a href="/login">Found</a>. 

但是,当我试图通过AJAX调用,它给了我一个奇怪的结果:

 $.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] 

警报说,头被设置为接受来自任何来源的请求。

当我直接调用Docker容器地址时,会发生同样的情况(curl工作,但不是)。

在后台发生了什么? 为什么第二个请求不起作用? 如何通过AJAX调用从Grafana获得响应?

问题是默认情况下,CORF在grafana上没有启用。 curl请求不检查CORS,但浏览器。 它是保护一个网站调用其他网站的API。

所以你的解决scheme是将一个反向nginx代理放在Grafana前面。 以下是docker-compose.yml的相同

 version: '2.1' services: grafana: image: grafana/grafana nginx: image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf ports: - "3000:80" 

而下面的nginxconfiguration会添加CORS到它,但它是非常开放的,将允许每个人访问

 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; } } } 

也为testing你不应该使用

  xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); 

删除和testing,它应该工作

CORS访问工作