Introduction

Grafana datasources can operate in Server (proxy) mode or Browser (direct) mode. In Server mode, Grafana proxies queries from the browser to the datasource, avoiding CORS issues. However, misconfiguration or network issues can cause the browser to attempt direct datasource access, triggering CORS errors. This prevents panels from rendering and blocks ad-hoc queries.

Symptoms

  • Browser console shows Access to fetch at datasource URL has been blocked by CORS policy
  • Grafana panels display Network Error or CORS error instead of data
  • Datasource test fails with CORS origin not allowed
  • Panels load in Grafana mobile app but fail in browser
  • Error message: No 'Access-Control-Allow-Origin' header is present on the requested resource

Common Causes

  • Datasource configured with Access type Browser instead of Server (proxy)
  • Reverse proxy stripping CORS headers from Grafana responses
  • Grafana root_url configuration mismatch causing browser to use wrong origin
  • Datasource URL configured with direct IP instead of going through Grafana proxy
  • Grafana served from different domain than the datasource without proper CORS headers

Step-by-Step Fix

  1. 1.Verify the datasource access type: Check if the datasource is using proxy mode.
  2. 2.`
  3. 3.# In Grafana UI: Configuration > Data Sources > select datasource
  4. 4.# Ensure "Access" is set to "Server" (not "Browser")
  5. 5.`
  6. 6.Check Grafana root URL configuration: Ensure the root URL matches the browser-accessible URL.
  7. 7.```ini
  8. 8.# grafana.ini
  9. 9.[server]
  10. 10.root_url = https://grafana.example.com/
  11. 11.serve_from_sub_path = false
  12. 12.`
  13. 13.Configure reverse proxy to preserve CORS headers: If using Nginx as reverse proxy.
  14. 14.```nginx
  15. 15.location / {
  16. 16.proxy_pass http://grafana:3000;
  17. 17.proxy_set_header Host $host;
  18. 18.proxy_set_header X-Real-IP $remote_addr;
  19. 19.add_header Access-Control-Allow-Origin $http_origin always;
  20. 20.add_header Access-Control-Allow-Credentials true always;
  21. 21.}
  22. 22.`
  23. 23.Test the datasource connection: Verify the datasource is accessible through Grafana.
  24. 24.`
  25. 25.# In Grafana UI: Configuration > Data Sources > select datasource > "Save & Test"
  26. 26.# Should show "Data source is working"
  27. 27.`
  28. 28.Verify panels render correctly: Check that browser-based panel queries work.
  29. 29.`
  30. 30.# Open a dashboard and verify all panels load data
  31. 31.# Check browser developer console for remaining CORS errors
  32. 32.`

Prevention

  • Always use Server (proxy) access mode for datasources to avoid CORS issues
  • Configure Grafana root_url to match the externally accessible URL exactly
  • Test datasource connectivity after any reverse proxy configuration changes
  • Monitor browser console errors in CI/CD pipeline dashboard tests
  • Document datasource access mode requirements in the Grafana deployment runbook
  • Use Grafana's built-in datasource provisioning to ensure consistent configuration