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.

因此，您的解决方案是将反向Nginx代理放在Grafana前面.下面是相同的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 config下面，它将向其添加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;
  }
}

}

您也不应使用此测试

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

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

Remove that and test and it should work

这篇关于Grafana没有通过AJAX做出回应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！