本教程旨在解决在HTML页面中使用
理解Iframe 404错误与相对路径解析
在开发过程中，我们常会遇到需要在一个HTML页面中嵌入其他HTML内容的需求，例如将多个报告合并到一个概览页面中。
问题场景分析
假设我们有一个父级HTML文件（overview.html），它包含两个
--top directory ----Overview ------overview.html ----Session_20Data_20for_20Overview_20Report ------index.html ----Runs_20Data_20for_20Overview_20Report ------index.html
overview.html中的
regression report
在某些环境下（例如直接在文件系统打开或在Linux环境的Jenkins上），这种配置可能正常工作。但在另一些环境下（如Windows环境的Jenkins），却可能在
根源分析：Web服务器与相对路径
这个问题的核心在于Web服务器如何解析和提供文件。当一个HTML页面通过Web服务器（如Jenkins内置的Jetty服务器）被访问时，页面中所有相对路径的资源（包括
错误信息中的URI: /static-files/…和SERVLET: Stapler、Powered by Jetty明确指出，页面是通过一个Web服务器（Jenkins使用Stapler作为其Web框架，底层通常是Jetty）来提供服务的。这意味着服务器正在尝试从其配置的Web根目录下去寻找/static-files/Session_20Data_20for_20Overview_20Report/index.html这个路径。
如果服务器并没有将Session_20Data_20for_20Overview_20Report和Runs_20Data_20for_20Overview_20Report这两个目录配置为可从/static-files/路径下访问的资源，那么即使这些文件在文件系统中的相对位置是正确的，服务器也无法找到它们，从而返回404 Not Found错误。在Jenkins的场景下，报告通常存储在工作空间的特定路径下，并通过Jenkins自身的URL结构来访问，例如http://jenkins-host/job/your-job/ws/path/to/report/index.html。
解决方案：采用完全限定URL
解决
如何构建完全限定URL
在Jenkins等Web服务器环境中，你需要确定你的报告文件实际是通过哪个URL路径对外提供的。通常，Jenkins会将构建工作空间中的文件通过特定的URL模式暴露出来。例如，如果你的Jenkins Job名为MyRegressionJob，并且报告文件位于工作空间的Session_20Data_20for_20Overview_20Report/index.html，那么其完全限定URL可能类似于：
http://your-jenkins-host:port/job/MyRegressionJob/ws/Session_20Data_20for_20Overview_20Report/index.html
其中：
your-jenkins-host:port 是你的Jenkins服务器地址和端口。/job/MyRegressionJob/ws/ 是Jenkins暴露工作空间内容的标准路径模式。
示例代码
修改overview.html中的
regression report
注意： 请将http://your-jenkins-host:port/job/MyRegressionJob/ws/替换为你的实际Jenkins服务器地址、端口和Job名称。
通过这种方式，浏览器会直接向指定的URL发起请求，绕过了服务器对相对路径的误解析，从而能够正确地加载嵌入的内容。
重要注意事项与最佳实践
1. 服务器配置与文件暴露
确保你的Web服务器（例如Jenkins）被正确配置，以便能够通过HTTP请求访问到这些报告文件。在Jenkins中，通常构建的工作空间内容会自动通过/ws/路径暴露。如果报告文件位于Jenkins之外的某个位置，你可能需要配置Web服务器（如Nginx, Apache）来代理或直接服务这些文件。
2. 跨域请求安全（CORS）
在原始问题中提到了一个警告：“Due to Cross Origin Request Security(CORS), this browsing mode is now deprecated. Use Detachable Report Mode instead.”
尽管404错误是由于路径解析问题导致的，但CORS是一个与
同一源策略： 当父页面和Jenkins的“可分离报告模式”： 警告中提到的“Detachable Report Mode”是Jenkins为了更好地处理报告而提供的功能，它可能以一种规避CORS或提供更安全、更灵活的方式来查看报告。如果可能，建议探索和使用Jenkins提供的报告查看机制。
3. 本地文件路径（file://）的局限性
虽然理论上可以使用file:///C:/path/to/report/index.html这样的本地文件路径作为src，但这通常不推荐用于Web应用。现代浏览器出于安全考虑，对file://协议的访问权限有严格限制，并且可能无法在不同操作系统或用户之间通用。此外，它也无法在Web服务器环境下工作。
4. 环境差异（Windows vs. Linux）
为什么在Linux环境下可能工作，而在Windows环境下却失败？这可能与Jenkins在不同操作系统上处理文件路径、启动Web服务器的方式，或默认的安全沙箱配置有关。例如，在某些Linux系统上，Jenkins可能更容易直接访问文件系统路径，或者其内部的URL映射机制在Linux上表现得更宽松。然而，依赖这种平台差异性是不稳定的，使用完全限定URL是更健壮的解决方案。
总结
当在Web服务器环境下使用
以上就是解决Iframe 404错误：理解相对路径与服务器环境下的URL解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585108.html
微信扫一扫 
支付宝扫一扫 
