微信小程序WebView嵌入别人网页的解决办法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序WebView嵌入别人网页的解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在做微信小程序开始时，大家都能遇到，WebView组件使用的URL必须要在小程序的后台设置业务域名，并且在对应域名服务器根目录下要放置对应的验证文件，否则发布后是无法正常打开的。

在开发测试时，我在小程序中嵌入了一个别人的网页。自己又不能在别人的服务器上放置验证文件，导致了发布后小程序的WebView中的内容无法正常显示。

微信小程序WebView嵌入别人网页的解决办法

解决办法

因为我这里有服务器和域名，因此使用了以下的方法

使用nginx将目标网址的代理到了我的二级域名下
将小程序验证文件的请求指向我本地服务上的验证文件

server {
    listen       8778;
    server_name  ltzf.agribigdata.com.cn;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    # iframe 跨域问题
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_hide_header X-Frame-Options;
        add_header X-Frame-Options ALLOWALL;
        add_header Access-Control-Allow-Origin *; # 必须要有
        add_header Access-Control-Allow-Headers *; # 必须要有

    #location / {
     #   root   /usr/share/nginx/ltzf;
    #    index  index.html index.htm;
    #}
    location =/4nzqVbVMLP.txt {
        root   /usr/share/nginx/ltzf;
        index  4nzqVbVMLP.txt;
    }
    location ^~/ {
    proxy_set_header Accept-Encoding "";
    proxy_set_header Referer "https://h5.aicloudav.com/";
    proxy_pass https://h5.aicloudav.com/;

    add_header Access-Control-Allow-Origin *;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/nxh5cj;
    }
}