本文探讨了在web环境中，特别是使用jenkins和jetty服务时，html页面中嵌套的iframe无法显示内容并报告404错误的问题。问题根源在于服务器对iframe `src` 属性中相对路径的解析不正确。文章详细阐述了通过将相对路径替换为完全限定url来解决此问题的方法，并提供了相关的实践建议和注意事项，以确保iframe内容正确加载。
iframe内容加载失败：404错误分析
在Web开发中， 元素常用于在一个HTML页面中嵌入另一个独立的HTML文档。然而，开发者有时会遇到 内容无法正确显示，并伴随“HTTP ERROR 404 Not Found”错误的情况。这通常发生在当父页面（如 overview.html）通过Web服务器（如Jenkins内置的Jetty服务器）提供服务时，而 的 src 属性使用了相对路径来引用其内容。
问题现象
当一个包含 的HTML页面被部署到Web服务器上，并通过 http:// 或 https:// 协议访问时，如果 的 src 属性指向一个相对路径，并且该路径无法被服务器正确解析，就会出现404错误。典型的错误信息会显示：
HTTP ERROR 404 Not FoundURI: /static-files/Session_20Data_20for_20Overview_20Report/index.htmlSTATUS: 404MESSAGE: Not FoundSERVLET: StaplerPowered by Jetty:// 9.4.46.v20220331
这表明服务器（在此例中是Jenkins的Stapler Servlet和Jetty服务器）在尝试根据其内部规则解析 的相对路径时，未能找到对应的资源。尽管文件系统上的相对路径看起来是正确的，但服务器的URL解析逻辑可能与预期不符。
潜在原因分析
服务器根路径解析差异： 当HTML文件通过 file:// 协议在本地浏览器中打开时，相对路径是相对于当前HTML文件的物理位置进行解析的。然而，当文件通过 http:// 协议由Web服务器提供时，相对路径是相对于当前请求的URL路径进行解析的。服务器可能有一个不同的静态文件服务根目录或URL重写规则，导致 ../ 这样的相对路径无法正确映射到文件系统上的实际位置。Jenkins/Jetty的静态资源处理： Jenkins（通过Stapler和Jetty）有其特定的方式来服务静态文件。错误信息中的 /static-files/ URI前缀暗示Jenkins可能尝试将请求映射到其内部的静态文件服务机制。如果 的相对路径与此机制不兼容，或者目标文件不在Jenkins预期的静态文件目录中，就会导致404。部署环境差异： 在不同的操作系统（如Windows和Linux）或不同的部署配置下，服务器对路径的解析行为可能存在细微差异，导致在某些环境中工作正常，而在另一些环境中出现问题。
解决方案：使用完全限定URL
解决此类404错误最直接有效的方法是，将 的 src 属性中的相对路径替换为完全限定URL（Fully Qualified URL）。完全限定URL包含了协议、域名、端口以及完整的资源路径，从而消除了服务器在解析相对路径时可能遇到的歧义。
立即学习“前端免费学习笔记（深入）”；
挖错网
一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。
28 查看详情
实施步骤
确定目标资源的完全限定URL： 首先，需要明确 想要加载的实际HTML文件（例如 index.html）在Web服务器上的完整URL。这通常可以通过在浏览器中直接访问这些报告页来获取。例如，如果 overview.html 位于 http://your-jenkins-instance/job/your-job/ws/Overview/overview.html，并且 Session_20Data_20for_20Overview_20Report/index.html 位于 http://your-jenkins-instance/job/your-job/ws/Session_20Data_20for_20Overview_20Report/index.html，那么这就是所需的完全限定URL。修改 的 src 属性： 将 overview.html 中 的 src 属性更新为这些完全限定URL。
示例代码
假设 Session_20Data_20for_20Overview_20Report/index.html 和 Runs_20Data_20for_20Overview_20Report/index.html 在Jenkins工作区的完全限定URL分别为：
http://your-jenkins-instance/job/your-job/ws/Session_20Data_20for_20Overview_20Report/index.htmlhttp://your-jenkins-instance/job/your-job/ws/Runs_20Data_20for_20Overview_20Report/index.html
那么 overview.html 应修改为：
regression report
注意： 这里的 http://your-jenkins-instance/job/your-job/ws/ 需要替换为实际Jenkins实例上对应工作目录的基URL。
注意事项与最佳实践
环境一致性： 确保在开发、测试和生产环境中，生成报告的URL路径保持一致，以便完全限定URL能够稳定工作。CORS（跨域资源共享）： 如果 加载的内容与父页面不在同一个域（协议、域名、端口任一不同），浏览器可能会触发CORS安全策略，阻止内容的加载。虽然本例中的404错误是路径解析问题，但原始问题描述中提及的CORS警告（”Due to Cross Origin Request Security(CORS), this browsing mode is now deprecated.”）是一个重要的提示。如果使用完全限定URL后仍然遇到加载问题，应检查目标资源的服务器是否配置了正确的CORS头部（例如 Access-Control-Allow-Origin）。动态生成URL： 如果报告的路径是动态变化的（例如包含会话ID或时间戳），在生成 overview.html 时，需要确保能够动态地构建出正确的完全限定URL。服务器配置检查： 如果确实希望使用相对路径，则需要深入检查Web服务器（Jenkins/Jetty）的配置，了解其如何处理静态文件和URL重写。可能需要调整Jenkins的静态文件服务配置或Jetty的上下文路径映射，以使其能够正确解析相对路径。安全性考虑： 使用完全限定URL通常更安全，因为它明确指定了资源的来源。但在某些情况下，如果内部资源不应被外部直接访问，则需要确保这些完全限定URL不会暴露敏感信息或导致未授权访问。
总结
当 在Web服务器环境下出现404错误时，首先应考虑服务器对 src 属性中相对路径的解析问题。通过将相对路径替换为完全限定URL，可以有效绕过服务器的路径解析歧义，确保 内容能够被浏览器正确加载。同时，也应关注CORS等潜在的安全策略，以确保Web应用的稳定性和安全性。
以上就是解决HTML iframe 404错误：相对路径与完全限定URL的解析策略的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/620705.html
微信扫一扫 
支付宝扫一扫 
