前端 - 什么情况会导致被反向代理的HTML页面无法加载？

Question

背景：公司的A系统使用iframe嵌入了B系统的页面，因为跨域问题，所以我们使用了A所在的apache服务器反向代理了B系统的所在的weblogic服务器，从而使得A系统和B系统处在同一个域。

问题：B系统每次上线，重新部署到weblogic服务器之后，部分用户在A系统通过iframe打开B系统都会iframe加载不出来，但是清理浏览器缓存之后就可以正常打开了。

其它：

1. 因为用户只反馈了这个BUG的现象，并没有给出前后端报错日志，所以导致很难排查。
2. 我自己测试了一下发现导致iframe页面空白的情况有两种，一种是渲染iframe之前，前端代码报错；第二种是iframe请求了错误的html（比如原来的html被删除了或者路径更改了），这两种情况会引发渲染iframe的页面空白。
3. 我猜测是不是服务器缓存出了什么问题，之前有同事说是浏览器缓存有问题，我个人觉得不太可能是浏览器缓存的问题，因为浏览器是将静态资源缓存到磁盘，如果服务器静态资源发生变更，而浏览器仍然请求浏览器缓存的话，造成的结果不是页面空白而是看不到新功能（比如原本的背景色是红色，新版本你改成了绿色，如果请求浏览器缓存那么仍然是红色）。

Answer 1

看描述信息应该是浏览器缓存的关系。

因为你的A系统并没有更新迭代。所以可以认为 iframe 中打开的仍然是旧的 url 地址。但有可能B系统已经迭代过了导致对应的 index.html 中的资源文件 hash 值已经变更。
所以本地磁盘中的缓存（也就是缓存的B系统 index.html 中的资源链接对应的资源都会404）。也就解释了你为啥清理浏览器缓存之后就可以正常打开了。

---

解决方式就是在Nginx代理转发的时候设置不缓存的头信息。或者在A系统使用 iframe 嵌入B系统的地方给 src 增加时间戳。让 iframe 以为每次请求的都是新地址来解决缓存的问题。

Answer 2

可能导致被反向代理的HTML页面无法加载的情况有多种，包括但不限于以下几点：

1. 缓存问题：

   • 服务器缓存：如果反向代理服务器（如Apache）配置了缓存机制，并且缓存了旧的或错误的页面内容，那么当用户请求时，代理服务器可能返回缓存中的旧内容而不是实际更新后的页面。
   • 浏览器缓存：虽然您认为不太可能是浏览器缓存的问题，但在某些情况下，即使内容变更，浏览器可能仍请求旧的缓存版本，尤其是在使用条件请求（如ETag和Last-Modified）时。

2. 配置问题：

   • 反向代理配置错误：如果Apache的代理配置不正确，可能会导致请求没有被正确转发到WebLogic服务器，或者返回的响应没有被正确处理。
   • 路径或URL重写问题：如果代理配置中涉及路径或URL的重写，那么可能存在路径映射不正确，导致请求的页面路径在WebLogic服务器上不存在。

3. 网络问题：

   • 网络延迟或中断：在请求从A系统到B系统的过程中，如果网络出现延迟或中断，可能导致页面加载失败。
   • CORS问题：虽然您已经提到使用了反向代理来规避跨域问题，但如果CORS配置不当或代理未正确处理CORS头部，仍可能导致问题。

4. WebLogic服务器问题：

   • WebLogic配置：WebLogic服务器的配置问题，如会话管理、应用部署配置等，可能导致页面加载异常。
   • 应用部署问题：如果B系统在WebLogic上的部署过程中出现问题，比如文件未正确部署或启动脚本有错误，也可能导致页面无法加载。

5. 前端代码问题：

   • JavaScript错误：如您所述，前端JavaScript代码报错可能导致iframe加载失败。
   • 资源加载失败：如果iframe中的页面依赖外部资源（如CSS、JS文件），而这些资源加载失败，也可能导致页面无法正确显示。

针对您提到的具体情况，以下是一些建议的排查步骤：

• 查看Apache和WebLogic的日志：检查代理服务器和WebLogic服务器的日志，看是否有关于请求处理或错误的记录。
• 检查网络请求：使用浏览器的开发者工具查看网络请求，确认请求是否被正确转发，以及响应的内容是否正确。
• 禁用缓存测试：在浏览器中禁用缓存或使用无痕模式进行测试，看是否能复现问题。
• 清理Apache缓存：如果Apache配置了缓存，尝试清理缓存后再进行测试。
• 增加日志输出：在前端和后端代码中增加日志输出，以便在出现问题时能够捕获更多的信息。

请注意，由于您提到用户没有提供详细的报错日志，因此排查过程可能较为困难。建议与用户沟通，尽可能获取更多的错误信息和场景描述，以便更准确地定位问题。