1、使用 ngrok 自建代理,或者购买已有的代理。
我用的是 https://www.echosite.cn/ 。http/https 各买一个回来。在控制台找到所注册域名(类似 xxx.east…) 对应的IP。

2、注册公网域名,备案。
也可以生成一个二级域名。修改域名的 A 指向,解析到刚才获取的IP。

3、设置域名
在微信公众号后台,左侧菜单最下面找到“设置-公众号设置-功能设置“里,修改业务域名、JS接口安全域名、网页授权域名。输入并保存准备好的域名。

4、准备好本地服务器
比如:

服务器地址为 http://localhost:7788/
VUE 客户端地址为 http://localhost:6688/web/

5、设置本地代理
在本地安装 Nginx。
在 MacOS 下,可以:

brew install nginx

将 80 端口转向服务端和客户端。

vim /usr/local/etc/nginx/nginx.conf

新增内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
listen 80;
server_name yourdomain.com;

location /sockjs-node/ {
proxy_pass http://localhost:6688/web/sockjs-node/;
}
location /web/ {
proxy_pass http://localhost:6688/web/;
}
location / {
proxy_pass http://localhost:7788;
}
}

6、在 echosite 设置的 config.yaml 里,将域名指向本地80端口:

http://yourdomain.com -> 127.0.0.1:80
https://yourdomain.com -> 127.0.0.1:80

启动代理服务:

./echosite -config=./config.yml start-all

这样,服务端和和客户端就可以合为一体,不再有跨域的问题。

7、 之后就可以编写本地 URL 接口,接收从微信服务端转发的推送,以及用户登录产生的回跳。

完整流程如下:

graph TD;
    Request-->Domain;
    Domain-->EchoSite;
    EchoSite--proxy-->Nginx[Local Nginx 80];
    Nginx--proxy_pass-->NginxProxy[proxy_pass];
    NginxProxy-->LocalServerF[Front Server:1234/web/];
    NginxProxy-->LocalServerB[Backend Server:1233/];
    LocalServerB-.-LocalServerF
    LocalServerF-->Client;
    Client-->End

又及

如果使用 webpack,似乎也可以在 devServer.proxy 中配置 Rewrite 路径

1
2
3
4
5
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}