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

UPDATE: 后来改用了自建方法，参看：
Ngrok 反向内网穿透和微信网页开发环境

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 接口，接收从微信服务端转发的推送，以及用户登录产生的回跳。

完整流程如下：

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