iframe加载https子应用加载失败的解决办法

750 阅读1分钟

问题描述

主应用使用的是http协议,在主应用中通过iframe加载外部子应用时,如果子应用使用http协议则可以正常加载,如果子应用使用https协议则主应用无法加载该子应用页面,显示“加载失败”。

解决办法

修改主应用的nginx配置,增加X_FRAME-Options配置项,ALLOW-FROM后面的值为子应用项目地址。该配置表示:子应用允许通过本主应用的iframe标签加载。nginx部分配置如下:


...省略


server {
  listen 80;
  add_header 'X_FRAME-Options' 'ALLOW-FROM https://abc.com/';
  
  ...省略
}

...省略

如果仍然加载失败,则可能是子应用页面本身问题,需要重新打开标签页,新标签页中直接访问子应用url,此时可能提示网站不安全,点击继续访问即可(另一个方法一劳永逸的方法是:修改chrome的快捷方式,在“目标”的原有参数后面增加“--test-type --ignore-certificate-errors”,比如:“.../chrome.exe --test-type --ignore-certificate-errors”)。此时再返回主应用标签页并刷新页面,就可以正常访问子应用页面了。

参考:MDN X-Frame-Options