解决 iframe 嵌入 grafana 问题

柔光的暖阳◎ 2023-10-02 14:53 4阅读 0赞

grafana 所有配置参考官网[https://grafana.com/docs/grafana/latest/administration/configuration/][https_grafana.com_docs_grafana_latest_administration_configuration]

##### 一、添加仪表盘 #####

首先启动 grafana 添加一个仪表盘，为了测试简单我是用的 grafana 自带的  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16]

##### 二、test.html 测试 #####

点击仪表盘分享，选择嵌入，复制代码粘贴到 html 中  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
HTML嵌入

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>grafanna</title>
    </head>
    <body>
        <h1>测试 iframe 嵌入 grafana</h1>
    	<iframe src="http://localhost:3000/d-solo/v20i9D5nz/1212?orgId=1&from=1636600498618&to=1636622098618&theme=light&panelId=2" 
    	width="650" height="400" frameborder="0"></iframe>
    	</body>
    </html>

##### 三、问题 #####

此处拒绝访问，iframe不能直接嵌入 grafana  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 2]

##### 四、修改默认配置 #####

官网说明，不建议直接修改 default.ini 配置文件  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 3]

###### 修改配置 ######

1、进入conf目录

*  `window、Linux：复制 sample.ini 到 custom.ini`
 *  mac：复制 sample.ini 到 grafana.ini，没有尝试

2、允许浏览器嵌入 grafana

*  `allow_embedding = true`  
    ![在这里插入图片描述][eb062f34ac3b44529c3f745d0f822d91.png]  
    配置到此处浏览器可以嵌入 grafana，但需要登陆  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 4]

3、开启匿名访问

*  `enabled = true`  
    ![在这里插入图片描述][6f309ee33552493aba3883ddb4084878.png]  
    访问测试，可以发现不需要登陆就可以访问  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 5]

[https_grafana.com_docs_grafana_latest_administration_configuration]: https://grafana.com/docs/grafana/latest/administration/configuration/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1bb8ac74cd8e40ed9f898c2fb8f4047c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiN5oeC5LiA5LyR,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/2f8b3e32735d4c7682375487f8af052a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiN5oeC5LiA5LyR,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/39dc1e6d938543169384056a64ab1e6d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiN5oeC5LiA5LyR,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/1a592e944a1b415e9c9a4015c13c94ac.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiN5oeC5LiA5LyR,size_20,color_FFFFFF,t_70,g_se,x_16
[eb062f34ac3b44529c3f745d0f822d91.png]: https://img-blog.csdnimg.cn/eb062f34ac3b44529c3f745d0f822d91.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/287c3d56d8db4372bb1968f40dba24b4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiN5oeC5LiA5LyR,size_20,color_FFFFFF,t_70,g_se,x_16
[6f309ee33552493aba3883ddb4084878.png]: https://img-blog.csdnimg.cn/6f309ee33552493aba3883ddb4084878.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oeC5LiA5LyR_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/5752bc3b4f5643fbbc09152b78387c45.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiN5oeC5LiA5LyR,size_20,color_FFFFFF,t_70,g_se,x_16