iframe嵌套微信公众号不显示最佳解决方案

代码参考地址:https://github.com/whj0117/wx...
一、出现问题原因:

  • 一次新需求上,需要用到iframe嵌套微信公众号展示,但由于微信做了拦截限制,也就是说设置了响应头“frame-ancestores:self”,所以导致在iframe中不能打开;
  • 也在查阅了很多资料,基本都是围绕cors-anywhere技术做ajax请求,将访问受限的页面DOM请求回来,在进行页面渲染;
  • 在测试过程中发现cors-anywhere早在2021年1月31日就已经停止作为开放代理,由于被很多人滥用,并且越来越频繁,所以导致现在请求会返回403(拒绝访问)状态。
二、解决办法:
  • 可以将cors-anywhere项目下载到本地https://github.com/Rob--W/cor...,并通过node.js在本地起服务,可以将“cors-anywhere.herokuapp.com”这个访问地址变为本地“127.0.0.1”进行ajax请求;
  • 接口请求成功后会把整个访问地址的DOM结构响应回来,注意:如果在本地请求会发现css文件下载失败,所以又用到nginx搭建本地服务,接下来咱们一起看想起流程。
三、详细实现流程:
  1. 假如我们直接访问//cors-anywhere.herokuapp.com/地址,会出现下图拒绝访问问题:
    iframe嵌套微信公众号不显示最佳解决方案
    文章图片
  2. 所以我们需要到https://github.com/Rob--W/cor...将整个项目下载到本地,会看到下图目录结构:iframe嵌套微信公众号不显示最佳解决方案
    文章图片
  3. 3.接下来我们打开server.js文件,会看到前两行设置ip和端口的变量,我自己如下配置,其他无需改动:iframe嵌套微信公众号不显示最佳解决方案
    文章图片
4.然后我们按照顺序执行:
npm install node server.js

【iframe嵌套微信公众号不显示最佳解决方案】5.这样cors-anywhere的跨域服务就起来了,检查是否成功,访问127.0.0.1:8090,看到如下图片说明成功了:iframe嵌套微信公众号不显示最佳解决方案
文章图片

6.以上内容主要是配置实现,接下来就可以写业务代码了,我的实现就是在本地新建index.html页面,然后引入的jquery的cdn进行ajax请求,用vue或者react的小伙伴也可以用axios进行请求,返回结果一样,代码如下图。iframe嵌套微信公众号不显示最佳解决方案
文章图片
注意:有一点值得注意的是,微信公众号的img展示都是data-src,所以我们需要正则匹配所有data-src全部替换成src,不然图片不显示
iframe嵌套微信公众号不显示最佳解决方案
文章图片

7.上图看到内容就已经全部展示出来了,不过细心的小伙伴应该已经看到,整体样式不是自适应的,没有自适应到我们屏幕上,后来研究发现是因为所有的css没有加载出来,css的地址有https变成了file,如果手动修改为https引入就没有问题iframe嵌套微信公众号不显示最佳解决方案
文章图片

8.后来想到可能是因为index.html为本地路径访问,可能会有些受限,(如果哪位大佬明白其中原因也可以留言我), 所以用nginx开启本地服务器访问index.html。iframe嵌套微信公众号不显示最佳解决方案
文章图片
至此所有的文件都加载成功了,页面也显示正常。
9.但是当大家看到页面后也许会遇到这种问题,iframe嵌套微信公众号不显示最佳解决方案
文章图片

由于微信拦截,所有图片访问受限,会出现如图问题,大家不要着急,我已经发现一个好的办法,只需要一行代码就能搞定,iframe嵌套微信公众号不显示最佳解决方案
文章图片
没错就是大家看到我圈起来的meta标签,加上之后就能正常访问。
完结

    推荐阅读