最近要做一个专门嵌入外部链接或者自定义文章的页面，结果发现一旦在iframe中使用了微信公众号url嵌入就会报错：

于是乎在查阅资料后发现这是因为微信的页面设置了响应头“frame-ancestors ‘self’”，简单来说就是微信阻止了外部页面将其嵌入的行为。那么该怎么办呢，我在网上寻找一番之后倒是发现了一些基于jQuery的解决方法，虽然我的项目是VUE移动端项目，不过还是可以借鉴修改一番的，直接上核心部分代码：

首先这个方法的核心就是利用cors-anywhere.herokuapp.com这个服务端的api，将跨域请求发送出去。而本来项目里的ajax请求是用axios的，但是通过axios发送的请求只能在reject中拿到返回值，感觉这样可能不太好，于是乎我换成了zepto的ajax请求方式。而通过这个服务端api返回的data-src属性需要替换成src，最后再放入iframe中的url即可。 完整代码：

写在后面：这种方法虽然解决了项目的燃眉之急，但还是存在两个问题，第一是从接口取到返回值的时候会报错（内容我还看不太懂，可能因为jQuery和zepto或axios的实现方式不太相同），目前看来不会影响正常使用；第二个就是cors-anywhere.herokuapp.com这是一个第三方的api，如果能够通过自己的后台实现这种代理会更好一点。此外，如果嵌入的页面中带有视频的话，似乎视频会无法播放，这一点有待证实。