vue 内部嵌入 iframe 导致跨域,以及自适应宽高问题

vue中加载 iframe  会出现跨域问题、以及iframe的高度自适应问题,以下是本人的解决办法:

 

1、情景描述:
  A系统为vue项目,需要使用iframe把 B 系统嵌入进来,但是 A、B系统不同域,导致B系统无法登录,cookies,session等无法存储,存在跨域问题,以及iframe自适应宽高问题
 
2、vue-cli 跨域问题处理:
  本地vue-cli 解决办法,通过proxy进行代理,如下图,然后iframe 中的地址如图二所示即可,配置完之后重启,完成跨域处理。

 

 

 

 

 

 

3、发布之后 nginx 跨域问题处理:
  nginx 配置如下图,注意 nginx 不能只配置一个整站代理,其资源文件如果也是通过 url 访问加载的,如 js, css等 也需要进行代理配置,不然会造成资源文件404找不到的问题

 

 

 

 

 

 

 4、iframe 加载后自适应宽高问题

自适应问题最好是在 contentWindow之后进行设置

 

posted @ 2019-01-29 17:28  傲气中华  阅读(8940)  评论(1编辑  收藏  举报