How to allow Access-Control-Allow-Origin: * for all the apis

1

i want to make cross domine calls how to allow it from grafana

i was able to do HTTP calls form postman and it was successful

but it i try to do same calls i wail get error like this

XMLHttpRequest cannot load http://grafana.staged-by-discourse.com/api/admin/users. Response for preflight has invalid HTTP status code 404
bluebird.js:1542 Unhandled rejection SuperagentPromiseError: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

please help

1 Like
2

There is no option for this in Grafana. The current solution is to put a proxy in front of it (like Nginx) and set the CORS headers there.

3

Need to do this with nginx as a reverse proxy for all grafana http api access, there is not CORS options built into grafana (sadly)

4

how to do this with nginx as a reverse proxy can you give an example

i will be great help for me

5

I donā€™t have anything to hand but here are some examples found via Google:

Or from our old docs:

auth_basic            "Restricted";
auth_basic_user_file  /path/to/my/htpasswd/file;

if ($http_origin ~* (https?://[^/]*\.somedomain\.com(:[0-9]+)?)) {  #Test if request is from allowed domain, you can use multiple if
    set $cors "true";                                               #statements to allow multiple domains, simply setting $cors to true in each one.
}

if ($cors = 'true') {
    add_header  Access-Control-Allow-Origin $http_origin;           #this mirrors back whatever domain the request came from as authorized, as
    add_header  "Access-Control-Allow-Credentials" "true";          #as long as it matches one of your if statements
    add_header  "Access-Control-Allow-Methods" "GET, OPTIONS";
    add_header  "Access-Control-Allow-Headers" "Authorization, origin, accept";
}
6

@daniellee thanks for you replay

where should i do this configuration?? is it in grafana code ??

i can c some config file called nginx.conf in which these are the settings

add_header Access-Control-Allow-Origin "*;
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "origin, authorization, accept";

which says to allow all origins
but may be this setings are only for graphite

if grafana donā€™t allow cros origin requests then what is the use of APIā€™s im bit confused

please let me know how can i achieve this i just want to call all grafana apiā€™s from my application

1 Like
7

This CORS configuration is not part of the grafana code/config.

Nginx is a reverse proxy server and is just a suggestion. You could do the same thing with Apache, IIS (if you are on Windows) and lots of other servers. Nginx is just the most popular option right now.

A proxy server is a goā€‘between or intermediary server that forwards requests for content from multiple clients to different servers across the Internet. A reverse proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server. A reverse proxy provides an additional level of abstraction and control to ensure the smooth flow of network traffic between clients and servers.

Hereā€™s a guide on installing nginx on Ubuntu: How To Install Nginx on Ubuntu 16.04 | DigitalOcean

8

Hi can i have some example configuration iā€™m scratching my head and not able to do it

till now i have installed nginex and made this configuration

server {
    listen 80;
    server_name  localhost;
    access_log off;
    location / {

            add_header 'Access-Control-Allow-Origin' "";
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, 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 'Content-Type' 'text/plain charset=UTF-8';
               proxy_pass http://grafana.staged-by-discourse.com;
            proxy_set_header    Host            $host;
            proxy_set_header    X-Real-IP       $remote_addr;
            proxy_set_header    X-Forwarded-for $remote_addr;
            port_in_redirect off;
            proxy_redirect  off;
            proxy_connect_timeout 300;

}

}

but still iā€™m getting same error please help

1 Like
9

Hmā€¦ why no wildcard (asterix *) char like in the example?

10

Grafana not having a config setup for cors is a regress. Sadly, we have other options like Nginx, but itā€™s a big gun to kill a little cockroach.

11

Is there a step by step guide to resolve this by doing a proxy? Grafana is so difficult to use without any proper documentation.

1 Like
12

I skipped trying to allow CORS requests and instead modified my nginx config for grafana.

Just add a /query location.

This is using linuxserver.ioā€™s letsencrypt docker container.

server {
listen 443 ssl;
listen [::]:443 ssl;

server_name grafana.*;

include /config/nginx/ssl.conf;

client_max_body_size 0;

location / {
    auth_request /auth-4;
    include /config/nginx/orgauth.conf;

    include /config/nginx/proxy.conf;
    resolver 127.0.0.11 valid=30s;
    set $upstream_grafana grafana;
    proxy_pass http://$upstream_grafana:3000;
}

location /query {
    auth_request /auth-4;
    include /config/nginx/orgauth.conf;

    include /config/nginx/proxy.conf;
    resolver 127.0.0.11 valid=30s;
    set $upstream_influxdb influxdb;
    proxy_pass http://$upstream_influxdb:8086;
}

}

13

@robby3 Hey Robby,
Iā€™ve been trying workaround with cors configurations in the nginx but is dont working. Can you please, explaine how and why your nginx configuration works?

Thanks in advance.

14

Hi there!

Iā€™ve faced the same problem with CORS issue when tried to embed Grafana dashboards to my web app.
So - created out-of-box to proxy Grafana requests.

May be it will help with you.

15

Sorry for the late reply @viniciusfdev

The reason this works is because it exposes influxdb behind the same auth mechanism as Grafana.
So, when you login to your main domain via organizr, the iframe will embed the main Grafana domain (https://grafana.mydomain.com), then Grafana will query the influxdb data source (https://grafana.mydomain.com/query) using the same cookies.

I have my influxdb data source setup in Grafana like this;

Untitled
Untitled974Ɨ1192 47.4 KB