使用Streamlit的components.iframe组件时出现连接拒绝问题

出现website_url refused to connect提示，大概率是以下原因导致，对应解决方案如下：

1. 目标网站禁止被iframe嵌入 #

绝大多数网站会通过HTTP安全响应头（如X-Frame-Options或Content-Security-Policy的frame-ancestors指令）限制自身被第三方页面嵌入，这是浏览器的安全机制。

• 解决方式：查看目标网站是否提供官方嵌入链接（多数图表类平台如Tableau、Plotly都会提供专门的embed地址），用这个专属URL替换原website_url。

2. 混合内容或跨域限制 #

如果你的Streamlit是本地运行（默认http://localhost:8501），而目标网站是HTTPS协议，浏览器会阻止不安全的混合内容加载；反之如果目标网站是HTTP，现代浏览器也可能限制其被HTTPS页面嵌入。

• 解决方式：
  • 若目标网站支持，优先使用同协议的URL（比如本地Streamlit用HTTPS运行，可通过ngrok等工具转发实现）；
  • 确认目标网站的CSP规则是否允许你的Streamlit页面域名嵌入。

3. URL格式错误 #

检查website_url是否是完整的可访问地址：

• 必须包含http://或https://前缀；
• 确保URL没有拼写错误，在浏览器中直接访问该URL能正常打开图表。

修改后的示例代码 #

import streamlit as st
import streamlit.components.v1 as components

# 替换为目标网站提供的官方嵌入URL
embed_url = "https://your-chart-platform.com/embed/your-chart-id"
components.iframe(embed_url, width=1000, height=600)

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