大家好，欢迎来到IT知识分享网。
vue中加载 iframe 会出现跨域问题、以及iframe的高度自适应问题，以下是本人的解决办法：
1、情景描述：
A系统为vue项目，需要使用iframe把 B 系统嵌入进来，但是 A、B系统不同域，导致B系统无法登录，cookies，session等无法存储，存在跨域问题，以及iframe自适应宽高问题
2、vue-cli 跨域问题处理：
本地vue-cli 解决办法，通过proxy进行代理，如下图，然后iframe 中的地址如图二所示即可，配置完之后重启，完成跨域处理。
![vue中嵌入iframe_vue如何实现跨域[通俗易懂]](https://img.mushiming.top/app/yundeesoft_com/a725108b4b4f49729ded9c8336643eac.png "vue中嵌入iframe_vue如何实现跨域[通俗易懂]插图")
![vue中嵌入iframe_vue如何实现跨域[通俗易懂]](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg "vue中嵌入iframe_vue如何实现跨域[通俗易懂]插图1")
![vue中嵌入iframe_vue如何实现跨域[通俗易懂]](https://img.mushiming.top/app/yundeesoft_com/b7fe11c8dcd4458a82645a3283831b0f.png "vue中嵌入iframe_vue如何实现跨域[通俗易懂]插图2")
3、发布之后 nginx 跨域问题处理：
nginx 配置如下图，注意 nginx 不能只配置一个整站代理，其资源文件如果也是通过 url 访问加载的，如 js， css等 也需要进行代理配置，不然会造成资源文件404找不到的问题
![vue中嵌入iframe_vue如何实现跨域[通俗易懂]](https://img.mushiming.top/app/yundeesoft_com/cc949c7e90c44b1487f13bb446e6550f.png "vue中嵌入iframe_vue如何实现跨域[通俗易懂]插图4")
4、iframe 加载后自适应宽高问题
自适应问题最好是在 contentWindow之后进行设置
![vue中嵌入iframe_vue如何实现跨域[通俗易懂]](https://img.mushiming.top/app/yundeesoft_com/3c72d49d0fb94665ba429500e41acbcb.png "vue中嵌入iframe_vue如何实现跨域[通俗易懂]插图6")
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/29109.html
