利用 Nginx 做反向代理解决微信小程序业务域名限制问题
[查看原文] https://fyh.me/2018/07/12/nginx-docker-miniprogram/
最近做了一个世界杯比赛日程的小程序,只有查看日程的功能,所以很快就发布上线了。后边想加入用户预测功能,但是时间紧、前后端实现又比较复杂,突然灵机一动想到用webview嵌入FIFA官网的比赛预测页面。
微信小程序支持通过webview来内嵌网页,但是要求业务域名预先审核配置,就是说只能是你自己拥有的并且已经备案的域名。明显,我并不拥有FIFA官网,因而无法配置为业务域名。不过我可以利用Nginx做反向代理(非透明代理,与之相反的是透明代理),利用自己的域名(https://api.wecode.net.cn ),把网页请求转发到FIFA官网(https://www.fifaofficial.cn ),这样我就不用开发就直接展示FIFA官方内容。
反向代理网页内容
一个网页的展示,首先得有HTML内容。把 https://api.wecode.net.cn 页面反向代理到 https://www.fifaofficial.cn ,这时请求就会得到目标网页的HTML内容返回。
location ^~/ {proxy_set_header Accept-Encoding "";proxy_set_header Referer "https://www.fifaofficial.cn/";proxy_pass http://www.fifaofficial.cn/;add_header Access-Control-Allow-Origin *;
}
这个不仅能处理index页面的请求,因为^~/
路由的是所有host为api.wecode.net.cn的所有请求。所以,给请求的返回加入Access-Control-Allow-Origin
头,可以避免一些请求数据的跨域问题。
反向代理静态资源
在网页里,通常都会包含很多静态资源的引用,如css、js、font等,同时都是使用cdn加速,所以会是使用不同的域名。
<link href="//cdn.fifaofficial.cn/assets/css/76151aa27c3d7972aa5c.styles.css" rel="stylesheet">
第一,把html中的静态资源引用域名替换为自己的域名下,所以刚才的配置中要加入sub_filter
(文档)替换声明
location ^~/ {proxy_set_header Accept-Encoding "";proxy_set_header Referer "https://www.fifaofficial.cn/";proxy_pass http://www.fifaofficial.cn/;add_header Access-Control-Allow-Origin *;sub_filter 'cdn.fifaofficial.cn' 'api.wecode.net.cn';sub_filter_types text/css text/xml text/html text/javascript application/json application/javascript;sub_filter_once off;
}
第二,反向代理静态资源文件。如
cdn.fifaofficial.cn/assets/.....css ===> api.wecode.net.cn/styles/.....css
Nginx配置为
location ~* \.(?:css|js|ttf|woff|svg|ico|png|jpg)$ {proxy_set_header Accept-Encoding "";proxy_set_header Referer "https://www.fifaofficial.cn/";proxy_pass http://cdn.fifaofficial.cn/$request_uri;add_header Access-Control-Allow-Origin *;sub_filter 'cdn.fifaofficial.cn' 'api.wecode.net.cn';sub_filter_types text/css text/xml text/html text/javascript application/javascript application/json;sub_filter_once off;
}
由于css、js等文件内也会引用别的资源,所以也是需要加入sub_filter
替换声明的。
配置SSL证书
微信小程序要求服务器使用SSL协议,所以也需要配置。
server {listen 443 ssl http2;server_name api.wecode.net.cn;#ssl on;ssl_certificate /etc/nginx/certs/api.wecode.net.cn_bundle.crt;ssl_certificate_key /etc/nginx/certs/api.wecode.net.cn.key;ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;...}
使用Docker部署Nginx服务
最近我也在学习容器服务,就尝试把Nginx服务部署到一个Docker容器中。安装好Docker后,执行
$ docker container run \ --rm \ --name mynginx \ --volume "$PWD/conf":/etc/nginx \--volume "$PWD/logs":/var/log/nginx/ \-p 127.0.0.1:443:443 \-d \nginx
上面的Nginx配置文件default.conf
就是保存在/conf
目录下,所以把文件目录/conf
映射到/etc/nginx
。/logs
目录映射即是存放日志文件,方便查看Nginx服务的日志。另外,-p
就是映射端口。
这时就可以访问 https://api.wecode.net.cn 就得到我想要的内容了,轻松把FIFA官方内容嵌入到我的小程序里。
源代码
完整代码放到了 https://github.com/fanyinghao/nginx-docker-miniprogram
作者:fanyinghao
链接:https://www.jianshu.com/p/47eff6eeec25
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
利用 Nginx 做反向代理解决微信小程序业务域名限制问题相关推荐
- 使用nginx反向代理在微信小程序中使用http请求
使用nginx反向代理在微信小程序中使用http请求 由于微信小程序对第三API的请求做了限制官方说明文档,导致我们无法访问非https的请求,然而我们在开发小程序过程中所请求的第三方接口不一定都是h ...
- 微信小程序业务域名配置
微信小程序可以访问外链了,但需要配置业务域名 配置业务域名条件 1.域名必须有http证书,也就是可以通过https访问的域名 2.下载校验文件,上传校验文件到域名根目录,如果是tomcat服务器放到 ...
- Nginx做反向代理和负载均衡时“X-Forwarded-For”信息头的处理
转载自:https://blog.51cto.com/wjw7702/1150225 一.概述 如今利用nginx做反向代理和负载均衡的实例已经很多了,针对不同的应用场合,还有很多需要注意的地方,本文 ...
- 小程序nginx做反向代理_NGINX作为节点或Angular应用程序的反向代理
小程序nginx做反向代理 A reverse proxy is a server that retrieves resources for clients from one or more upst ...
- 利用fiddler抓包爬取微信小程序数据
利用fiddler抓包爬取微信小程序数据 1.背景原理 有些微信小程序无法在PC端进行访问 原因 判断非微信'内嵌浏览器',则禁止访问 解决方法 模拟微信'内嵌浏览器'进行访问,需要获取的数据有:Us ...
- uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
- 微信小程序业务好(做)跑吗?我想做小程序代理业务
微信小程序业务好(做)跑吗 ? 说真的你得看当地市场是个什么样的环境,如果你本地商场的商家都对微信小程序不温不火,漠不关心的话,你再怎么苦口婆心,说一大堆的好处,我相信他们还是会无动于衷的,这种市场跑 ...
- 微信小程序不支持打开非业务域名_一行代码网站封装微信小程序,并解决微信小程序不支持打开非业务域名https://,请重新配置的问题!...
一行代码封装微信小程序 利用「」一行代码原封不动的把你现有博客或者网站封装成小程序. 第一步 注册微信小程序账号并登陆,点击菜单栏 "开发" 中的"开发设置", ...
- 解决微信小程序配置https不成功问题
解决微信小程序配置https不成功问题 参考文章: (1)解决微信小程序配置https不成功问题 (2)https://www.cnblogs.com/ant-jmf17/p/8056989.html ...
最新文章
- python turtle画熊-Python使用turtle库绘制小猪佩奇(实例代码)
- 图像处理之基于阈值模糊
- 3高并发服务器:多路IO之epoll
- python 字符串处理 字典_python 字符串和字典
- java中各种数据类型的使用
- python web开发基础_python web开发基本概念
- yolov5搭建环境_YOLOv5从入门到部署之:训练私有数据并修改模型
- 实时获取麦克风语音信号
- 使用Navicat Premium 同步 测试数据库 与 正式数据库 数据
- python pathlib模块_【Python Snippets】Pathlib 模块
- 新代数控系统编程说明书_数控加工中心编程快速入门教程
- 关于java.lang.ClassNotFoundException
- 最近公司准备启动一个风险系统【Springboot + urule 】
- HTML入门(学习方法+概述)
- 《C++ Primer Plus 第六版 中文版》的研读与学习(五)
- SQlException 对象名无效
- 小蜜蜂无纸化考试系统 官网
- Entering emergency mode. Exit the shell to continue.
- http://nxlhero.blog.51cto.com/962631/1666250?plg_nld=1plg_uin=1plg_auth=1plg_nld=1plg_usr=1plg_...
- vue父子组件传值:详解父组件向子组件传值(props)
热门文章
- 跨域问题JAVA后台设置cors跨域中关于access-control-allow-headers导致的错误
- 『最近公共祖先·神奇转化』挖矿
- 分布式系统的流量防卫兵Sentinel-入门指南
- 【华为机试题解】奥特曼打怪兽
- LCS最详细题解!!!!!
- 计算机图形学绘画应用,计算机图形学的介绍
- 掌阅云计算机系统架构,开阳掌阅云自动阅读系统新的创业项目
- c语言如何直接强制退出程序,Go程序如何安全退出(CTRL+C)-Go语言中文社区
- php读取所有cookie,PHP读取Cookie
- 查找域控命令_AD域控 Dsquery 查询命令实例汇总