Grafana 通过 AJAX 没有响应

Posted 2023-02-16

【中文标题】Grafana 通过 AJAX 没有响应

【英文标题】：No response from Grafana via AJAX

【发布时间】：2018-01-31 20:30:29

【问题描述】：

我在 Docker 容器（来自 Docker 存储库的grafana/grafana 映像）中设置了 Grafana，端口 3000 转发到我的本地主机。下面是我的docker-compose.yml：

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

最初我也有指向 Graphite 的链接以及一些卷和环境配置（仅限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]

Alerts 表示标头设置为接受来自任何来源的请求。

当我直接调用 Docker 容器地址时，也会发生同样的情况（curl 有效，但 ajax 无效）。

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

【参考方案1】：

问题是默认情况下，在 grafana 上未启用 CORS。 curl 请求不会检查 CORS，但浏览器会检查。保护一个站点调用其他站点的API。

所以您的解决方案是在 Grafana 前面放置一个反向 nginx 代理。以下是相同的docker-compose.yml

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

在 nginx 配置下面会添加 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 "$corso";
    

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

也用于测试，你不应该使用

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

删除它并测试它应该可以工作

【讨论】：

等一下，这确实有道理，但我看不到 nginx 和 grafana 容器之间的连接。为什么端口是 3000:80？看起来 3000 上的 localhost 可以看到不是 grafana 而是 nginx 服务。我还没有尝试过，但是在深入研究您的答案后，我想到了这些问题。尝试应用您的建议后，将提供更详细的反馈。

Nginx 在80 和grafana 上侦听3000。所以我们使用http://grafana:3000;代理传入nginx，并将nginx端口80暴露为3000

好的，还是不行。我将您的 nginx 服务添加到我的目标 docker-compose 并添加了 links: grafana 子句。这对我来说似乎是必要的，因为我不知道 nginx 如何让 Grafana 工作。您能否提供您正在使用的确切命令来运行您建议我的docker-compose.yml 文件？

我测试并发布了。您不需要添加链接。你在哪个版本的 docker 上测试过？我有最新的17.06-ce

Docker version 1.12.6, build 78d1802