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搭建本地服务，接下来咱们一起看想起流程。
- 假如我们直接访问//cors-anywhere.herokuapp.com/地址，会出现下图拒绝访问问题：
文章图片
- 所以我们需要到https://github.com/Rob--W/cor...将整个项目下载到本地，会看到下图目录结构：
文章图片
- 3.接下来我们打开server.js文件，会看到前两行设置ip和端口的变量，我自己如下配置，其他无需改动：
文章图片
npm install
node server.js【iframe嵌套微信公众号不显示最佳解决方案】5.这样cors-anywhere的跨域服务就起来了，检查是否成功，访问127.0.0.1:8090，看到如下图片说明成功了：
文章图片
6.以上内容主要是配置实现，接下来就可以写业务代码了，我的实现就是在本地新建index.html页面，然后引入的jquery的cdn进行ajax请求，用vue或者react的小伙伴也可以用axios进行请求，返回结果一样，代码如下图。
文章图片
注意：有一点值得注意的是，微信公众号的img展示都是data-src，所以我们需要正则匹配所有data-src全部替换成src，不然图片不显示
文章图片
7.上图看到内容就已经全部展示出来了，不过细心的小伙伴应该已经看到，整体样式不是自适应的，没有自适应到我们屏幕上，后来研究发现是因为所有的css没有加载出来，css的地址有https变成了file，如果手动修改为https引入就没有问题
文章图片
8.后来想到可能是因为index.html为本地路径访问，可能会有些受限，（如果哪位大佬明白其中原因也可以留言我）， 所以用nginx开启本地服务器访问index.html。
文章图片
至此所有的文件都加载成功了，页面也显示正常。
9.但是当大家看到页面后也许会遇到这种问题,
文章图片
，
由于微信拦截，所有图片访问受限，会出现如图问题，大家不要着急，我已经发现一个好的办法，只需要一行代码就能搞定,
文章图片
没错就是大家看到我圈起来的meta标签，加上之后就能正常访问。
完结
推荐阅读
- PP助手怎样导入微信表情？PP助手一件导入微信表情办法
- 微信表情雨怎样下？从天而降的微信表情雨自制秘籍
- 小程序|ssm基于微信小程序旅游管理系统——计算机毕业设计
- 如何从JSON中提取嵌套的值（）
- 微信小程序|微信小程序中使用vant框架，方法步骤清晰，简单适用
- Go语言实现企业微信sdk，集成了第三方应用sdk和自建应用代开发的sdk，支持一键生成新sdk
- android错误（RealmClass注释不支持嵌套类）
- Android iframe错误
- code换取微信openid|code换取微信openid_「干货」微信支付前后端流程整理(Vue+Node)
- 使用Angular 4表单（嵌套和输入验证）