Web component

问题场景

用户在网页中通过 Web component 方式嵌入 Hugging Face Space 上的 AI 模型应用，示例代码如下：

<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.15.0/gradio.js"></script>
<gradio-app src="https://kamtera-persian-tts-coquitts.hf.space"></gradio-app>

该页面仅 gradio.s3-us-west-2.amazonaws.com 地址无法访问，必须开启 VPN 才能打开，其他相关域名（huggingface.co、gradio.app、amazonaws.com）均正常。

报错原文

Web component
The Gradio library link is not accessible in our region.
https://gradio.s3-us-west-2.amazonaws.com/3.15.0/gradio.js does not open without a VPN.
All Gradio library versions are inaccessible without VPN.

原因分析

可能原因：Gradio Web component 所需的 gradio.js 文件托管在 AWS S3 的 s3-us-west-2（美国西部俄勒冈）区域桶中。根据 Issue 评论中引用的 Stack Overflow 讨论，AWS S3 部分区域桶在伊朗等特定地区存在网络访问限制，导致 gradio.s3-us-west-2.amazonaws.com 地址被阻断。维护者测试了其他 AWS S3 桶地址（如 aws-solutions-assets.s3.amazonaws.com），虽然该地址也无法直接访问，但问题本身不是 Gradio 项目代码导致的，而是 AWS 基础设施层面的网络策略限制。

环境排查

• 确认当前网络环境（地区、运营商）是否可以直接访问 https://gradio.s3-us-west-2.amazonaws.com/ 根路径。
• 对比测试其他 AWS S3 桶地址是否也被阻断，例如直接访问 https://aws-solutions-assets.s3.amazonaws.com/。
• 检查需要嵌入的 Hugging Face Space 是否允许 iframe 嵌入，可通过浏览器开发者工具查看响应头中的 X-Frame-Options 或 Content-Security-Policy 字段。

解决步骤

1. 先确认是否为网络策略问题：在有问题的网络环境下，尝试直接访问 https://gradio.s3-us-west-2.amazonaws.com/3.15.0/gradio.js，看是否能正常下载 JS 文件。
2. 如果确认是网络阻断，可尝试将 Gradio 相关静态资源换用其他 CDN 镜像或自建代理中转地址；但这需要自行修改引入脚本的 URL 路径。
3. 如果希望改用 iframe 嵌入代替 Web component，可先将目标 Space 地址在普通浏览器中打开，观察页面能否正常加载；然后用 iframe 方式嵌入，并在浏览器开发者工具中检查 Network 面板是否出现被 X-Frame-Options 拦截的提示。
4. 如果 Hugging Face Space 默认禁止 iframe，可咨询 Space 作者是否在部署时配置了允许 iframe 嵌入的响应头，或选用其他不限制嵌入的 Space 应用。

验证方法

在修复后，直接访问嵌入页面（不开启 VPN），确认 <gradio-app> 组件或 iframe 内应用能够正常加载显示；同时检查浏览器控制台不再出现网络请求失败的报错。如果使用 iframe，需确认嵌入的应用在 iframe 内可以正常交互而不仅仅是静态展示。

参考来源

gradio-app/gradio #10264