利用 Nginx 做反向代理解决微信小程序业务域名限制问题

发表于 | 更新于 | 分类于 | 评论数：

最近做了一个世界杯比赛日程的小程序，只有查看日程的功能，所以很快就发布上线了。后边想加入用户预测功能，但是时间紧、前后端实现又比较复杂，突然灵机一动想到用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内容返回。

1
2
3
4
5
6
7
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加速，所以会是使用不同的域名。

1
<link href="//cdn.fifaofficial.cn/assets/css/76151aa27c3d7972aa5c.styles.css" rel="stylesheet">

第一，把html中的静态资源引用域名替换为自己的域名下，所以刚才的配置中要加入sub_filter(文档)替换声明

1
2
3
4
5
6
7
8
9
10
11
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;
}

第二，反向代理静态资源文件。如

1
cdn.fifaofficial.cn/assets/.....css    ===> api.wecode.net.cn/styles/.....css

Nginx配置为

1
2
3
4
5
6
7
8
9
10
11
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协议，所以也需要配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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后，执行

1
2
3
4
5
6
7
8
$ 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