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之后进行设置