解决 iframe 嵌入 grafana 问题

最新推荐文章于 2025-02-02 00:43:09 发布
最新推荐文章于 2025-02-02 00:43:09 发布
阅读量2.3w 收藏 20
点赞数 11
分类专栏： 物联网平台 文章标签： grafana 运维 监控
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41538097/article/details/121272955
版权

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

一、添加仪表盘

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

二、test.html 测试

点击仪表盘分享，选择嵌入，复制代码粘贴到 html 中
在这里插入图片描述
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
在这里插入图片描述

四、修改默认配置

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

修改配置

1、进入conf目录

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

2、允许浏览器嵌入 grafana

  • allow_embedding = true
    在这里插入图片描述
    配置到此处浏览器可以嵌入 grafana，但需要登陆
    在这里插入图片描述

3、开启匿名访问

  • enabled = true
    在这里插入图片描述
    访问测试，可以发现不需要登陆就可以访问
    在这里插入图片描述
Grafana嵌入iframe,websoket连接报错400或403（nginx代理）
一个行走江湖的人
06-28 1895
1、custom.ini配置文件修改allowed_origins=*
Grafana链接iframe嵌入Web前端一直跳登录页面的问题记录
qq_38189542的博客
09-29 1371
公司有个项目使用到Grafana作为监控界面，因为项目方的环境极其复杂，仅物理隔离的环境就有三四个，而且每个都得部署项目，今天在某个环境测试，查看界面遇到一个比较奇怪的Grafana问题，后面针对该问题进行跟踪分析并解决，故而博文记录，用于备忘。
Grafana基础：集成方法之页面嵌入
热门推荐
知行合一 止于至善
01-20 2万+
前面的文章介绍一下如何在Grafana中设定匿名登录的方式，然后直接跳转到Grafana中即可，但是这种方法需要在Grafana和其他系统中跳来跳去。实际上Grafana可以直接通过iframe等方式嵌入到其他系统页面中，这篇文章通过具体介绍一下相应的方法。
Python Django 嵌入 Grafana Dashboard（随手记）
最新发布
Tassel_YUE的博客
02-02 598
作为一名网络工程师/运维工程师，现在都在往DevOps的方向发展。其中大家都不可避免的会往自己开发平台的方向发展。那么如何将自己制作的 Grafana 面板 引入到自己的平台上？一般来说，大家都会选择Python来作为自己开发的语言，并会选择Django作为Web应用的开发工具。在Python中，引入Grafana面板只需要页面嵌入就可以了。
iframe嵌套grafana （前端视角）
miin_ying的博客
05-06 3743
iframe嵌入grafana，必要了解
通过iFrame嵌入Grafana页面或pannel
星猿科技的博客
01-06 4879
grafana具体Dashboard页面，右上角分享按钮点开有链接，拷贝后作为iframe的url。或者可以通过快照导入，生成本地快照，拷贝快照链接，作为ifame的url即可。针对具体pannel，其嵌入其他页面的链接可在其自己组件的分享界面获取。
自主系统通过iframe 嵌入 grafana 仪表板（dashboard）
manba_24的专栏
08-01 1549
使用iframe方式嵌入dashboard主要会遇到以下几个问题：1、iframe方式嵌入dashboard跳转拒绝访问；2、浏览器控制台报错：Refused to display 'http://{ip:port}/' in a frame because it set 'X-Frame-Options' to 'deny'；3、跳转之后依然需要登录；......以上有些问题，可以通过修改配置文件相关配置来解决（修改配置文件之后，记得重启grafana服务）
网页通过iframe嵌入grafana
qq_43159578的博客
03-29 3478
进入grafana容器 docker exec -u root -it grafana sh 修改/usr/share/grafana/conf下的缺省配置文件defaults.ini 我们添加参数： cfg:default.security.allow_embedding=true 后在 iframe 里面可以显示出来了。 但是登录不上，提示登录成功，但是还是回到了登录界面。 添加匿名登录的参数： cfg:default.auth.anonymous.enabled=true 界面就出来了， 我们
iframe内嵌grafanadashboard
12-26
要在网页或其他应用程序中通过 `iframe` 嵌入 Grafana 仪表板，需按照特定的方法进行设置。这不仅涉及到 HTML 的编写还可能涉及 Grafana 配置调整。 #### 准备工作 确保拥有访问目标 Grafana 实例及其上所需展示...
Grafana集成到自己的Web项目1
08-08
首先，集成Grafana通常采用的方式是在Web页面中通过`<iframe>`标签嵌入Grafana的仪表板。这种方式简单易行，但可能会面临一些挑战，比如浏览器缓存清除或Session失效后，用户每次访问时都需要重新登录Grafana。为了...
vue通过iframe方式嵌套grafana图表
cui_win的专栏
11-05 1236
我们的前端是vue实现的，监控图表是在grafana中的，需要在项目web页面直接显示grafana。
使用iframe内嵌grafana监控页面
chaodaibing的博客
10-29 761
使用iframe内嵌grafana监控页面，制作监控大盘
grafana iframe嵌入不显示的问题
繁忙之余别忘了生活
05-28 3313
grafana iframe嵌入不显示的问题 注意： grafana\grafana\conf目录下有两个配置文件defaults.ini、sample.ini defaults.ini这个才是grafana服务器真正运行时的配置文件 sample.ini只是个样例，别改错了 开启匿名登录 修改grafana\grafana\conf目录下的defaults.ini文件中的 ````[auth.anonymous]中的enabled = true``` 允许浏览器渲染iframe 修改上述文件中的al
grafana的html文件路径,【解决方案】iframe嵌套Grafana如何伪装
weixin_31885875的博客
06-16 1113
转载：https://www.jianshu.com/p/bb64e714859c事件描述时间紧急、性能数据采集改造、后端近期无法直接提供数据接口，希望通过grafana直接作为可视化监控，做一层包装且尽可能的伪装。技术选型1. Grafana v6.32. Vue安装Grafana在初次部署的时候，我是使用docker安装，由于后面需要修改配置文件，要把这些文件和数据挂载出来，就遇到一些问题。...
vue嵌套grafana展示监控数据Refused to display ‘http://127.0.0.1:3000/login‘
可控的事情要谨慎，不可控的事情要乐观。
09-07 3812
控制台报错信息: Refused to display ‘http://127.0.0.1:3000/login’ in a frame because it set ‘X-Frame-Options’ to ‘deny’. 嵌套grafana监控dashboard，只需要在web监控iframe中嵌进去： <iframe src="http://192.168.0.1:3000/d/oidoT24Wk/apache-jmeter?refresh=5s&orgId=1" width="450"
grafana 嵌入 share链接
weixin_43844239的博客
05-26 1507
vue项目通过iframe嵌入grafana 1、设置允许iframe嵌入 打开conf/defaults.ini，设置allow_embedding = true 补充：设置允许匿名访问，不需要登录 [auth.anonymous] enabled = true 2、生成link链接 点击dashboard的share按钮，根据需要选择配置，点击copy复制生成的链接 3、将复制的链接填写入iframe，嵌入成功 隐藏左侧菜单栏，在链接上添加&kiosk=tv 隐藏左侧和顶部，则在链接上添加
iframe调用页面添加header
weixin_43839871的博客
02-15 8852
场景：对于iframe集成的页面进行权限校验。由于iframe默认的src的不能传递header， 因此需要把iframe调用方式改为ajax，代码如下。写个测试的页面测试下。
iframe嵌套跨域grafana,前端如何自定义隐藏模块
miin_ying的博客
10-24 3042
iframe嵌套跨域grafana,前端如何自定义隐藏模块
grafana图表使用ifream内嵌到其他系统频繁登录问题
Always on the road
10-27 2603
背景：grafana图表需要集成到别的系统中，为了保留grafana的所有功能，这边选择了ifream的方式。 问题现象：ifream引用grafana图表出现登录成功字样后重新跳转到登录页面。 查看grafana日志为： t=2021-10-27T15:26:23+0800 lvl=info msg="Request Completed" logger=context userId=0 orgId=0 uname= method=GET path=/ status=302 remote_addr=
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值