如何解决Grafana启用CORS失败问题，支持React应用调用API？

1. 确认实际生效的配置文件路径 #

Grafana的defaults.ini是默认模板文件，多数部署场景下实际加载的是自定义配置文件（而非defaults.ini），你需要先找到正确的配置文件：

• 查看Grafana启动日志，日志中会明确显示加载的配置文件路径（比如Linux系统通常为/etc/grafana/grafana.ini）
• 执行命令grafana-cli admin reset-admin-password --config <候选路径>，能正常执行的路径即为有效配置文件路径

2. 修改CORS相关配置 #

打开有效配置文件，找到[server]区块，添加或修改以下配置项：

[server]
# 允许的跨域来源，填写你的React应用地址，多个用逗号分隔
allowed_origins = http://localhost:3000,https://your-react-production-domain.com
# 允许的请求方法，必须包含POST
allowed_methods = GET,POST,PUT,DELETE,OPTIONS
# 允许的请求头，根据你的API需求添加，比如Authorization、Content-Type
allowed_headers = Authorization,Content-Type
# 若需要在请求中携带凭证（如Cookie），设置为true
allow_credentials = true

Docker部署场景 #

如果用Docker运行Grafana，可直接通过环境变量配置，无需修改配置文件：

docker run -d \
  -p 3000:3000 \
  -e GF_SERVER_ALLOWED_ORIGINS=http://localhost:3000 \
  -e GF_SERVER_ALLOWED_METHODS=GET,POST,PUT,DELETE,OPTIONS \
  -e GF_SERVER_ALLOW_CREDENTIALS=true \
  grafana/grafana

3. 重启Grafana服务 #

修改配置后必须重启服务才能生效：

• Linux系统：sudo systemctl restart grafana-server
• Docker容器：docker restart <grafana-container-name>

4. 验证CORS配置是否生效 #

用curl命令测试跨域响应头：

curl -H "Origin: http://localhost:3000" -I http://your-grafana-domain.com/api/org

如果响应头中包含Access-Control-Allow-Origin: http://localhost:3000及对应方法、头信息，说明配置生效。

常见问题排查 #

• 错误修改defaults.ini：确认修改的是实际加载的配置文件，而非默认模板
• 通配符与凭证冲突：若设置allow_credentials = true，allowed_origins不能用*，必须指定具体域名
• 反向代理覆盖响应头：如果Grafana前有Nginx等反向代理，需确保代理不覆盖Grafana返回的CORS响应头，或在代理层同步配置CORS规则

内容的提问来源于stack exchange，提问作者Zander007