利用 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 ...
最新文章
- 小白入门深度学习 | 第五篇:数据不均衡的处理方法
- Floating-Rate Note - FRN
- 获取用户列表为空_数据结构和算法(Golang实现)(15)常见数据结构-列表
- 如何删除集合(数组)中指定的元素
- 我通过了 Google 技术面试,所以你也能行!
- 几十秒构建端到端 AI,NeurIPS 2020 AutoDL 竞赛夺冠“黑马”原来靠的是这门技术!...
- 忍者X2简介+安装包+安装环境说明 [复制链接]
- 基于依存句法规则的篇章级情感分析demo
- ORACLE11g R2数据库安装(一)
- SQLServer数据库备份与还原
- 笔记:《深入浅出统计学》第十三章:假设检验(显著性检验)
- 三菱PLC排故障的方法
- qt 两界面类操作另外一个界面的的ui控件;以及会出现的the class containing “ui::XXX”cound not be found...Please verify the .
- WEEK 7作业 A-TT的魔法猫 B-TT的旅行日记 C-TT的美梦
- 青玉案·元夕 【宋代】辛弃疾
- 模板消息接口php代码demo,发送模板API例子
- 《图解TCP/IP》——第一章 网络基础知识
- 搜索技巧——奇偶剪纸
- js对象新增方法object.assign()
- 前端初中级面试题及部分答案