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/地址，会出现下图拒绝访问问题：
   
2. 所以我们需要到https://github.com/Rob--W/cor...将整个项目下载到本地，会看到下图目录结构：
3. 3.接下来我们打开server.js文件，会看到前两行设置ip和端口的变量，我自己如下配置，其他无需改动：

4.然后我们按照顺序执行：

npm install
node server.js

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标签，加上之后就能正常访问。
完结