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

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

在开发测试时，我在小程序中嵌入了一个别人的网页。自己又不能在别人的服务器上放置验证文件，导致了发布后小程序的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;}
}

这样配置后，通过了微信的认证，小程序端正常显示

注意

我的nginx转发配置设置的很简单，因为目标网址的接口等没有设置跨域或者不允许被代理。如果你遇到这样的情况，需要在nginx的转发配置上下些功夫了。

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

微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
微信小程序 border设置单边框失效解决办法
微信小程序 border设置单边框失效解决办法遇到的问题解决的方法总结遇到的问题 border-right: 1 rpx solid #ccc;border-bottom: 1 rpx sol ...
【愚公系列】2022年09月微信小程序-webview内嵌网页的授权认证
文章目录前言一.webview内嵌网页的授权认证 1.内嵌页面 2.登录页面二.web端相关函数 1.判断是否是小程序环境前言随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积 ...
微信小程序相同appid项目名称重复解决办法
在做微信小程序实验的时候有一次在硬盘直接删除项目比如我建的小程序的项目名叫 layout 当我再次使用微信开发工具建立 layout 项目的时候报已存在touristappid layout项目这 ...
反编译获取微信小程序源码（包含错误解决办法）
PS:本文章仅用于分享自己反编译的过程以及解决办法,切勿小程序反编译成功后做一些违反人伦的事情! 一. 前言最近在搞学校的一个晚签到小程序的时候遇到了一个MD5加密问题,试了好多方法都没有解决,所以 ...
微信小程序审核不通过原因和解决办法
微信小程序审核不通过原因有很多种,注意看微信提供的通知中对审核不通过的说明. 原因:见微信提供的通知中对审核不通过的说明解决办法:根据微信通知要求修改.
微信小程序苹果手机边框1rpx显示不全解决办法
微信小程序苹果手机边框1rpx显示不全,加上transform: rotateZ(360deg) .address-map{width: 125rpx;height: 36rpx;line-heigh ...
微信小程序web-view嵌入h5页面，分享当前页
① index.wxml 为web-view标签添加bindload事件 web-view bindload | 微信开放文档 <web-view src="{{webview_u ...
微信小程序数据 \n 换行符失效解决办法
最近遇到一个问题,使用uni-app写小程序时,拿到一个字符串: 后台返回的,需要在"\n"处换行.但是直接使用: let title = 黄鹤楼送\n孟浩然之广陵 <tex ...

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

解决办法

注意

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

最新文章

热门文章