目录

前言

目的

通过Nginx代理实现本地调试微信公众号

实现工具

实现步骤

1.启动本地前端项目

2.首先配置Nginx

3.填写app.conf内容，把本地前端项目与域名形成映射。

4.把app.conf加入到Nginx配置中

5.打开我们安装好的SwitchHosts工具

6.右键管理员权限启动Nginx

7.成功访问

---

前言

微信公众号网页调试的时候，必须通过微信公众号后台备案配置的域名才能进行访问。有时候开发者调试时都是打包了前端代码上传到服务器后再调试，这样效率未免会很低。我们可以使用代理的方式去实现本地调试

目的

通过Nginx代理实现本地调试微信公众号

实现工具

1.Nginx

2.SwitchHosts（一键切换Hosts配置）

3.微信开发者工具

实现步骤

1.启动本地前端项目

我们本地启动了前端项目，本地地址比如是 127.0.0.1:80/index，或者有时候也是配置成本机ip，例如：192.168.20.62:80/index

线上公众号域名：stagings-api02.kldidi.com

2.首先配置Nginx

我们找到Nginx安装目录下的conf文件夹，新建一个app文件夹，里面新建一个app.conf文件

3.填写app.conf内容，把本地前端项目与域名形成映射

proxy_pass 填写 http://127.0.0.1:80 ，或者为本机ip：http://192.168.20.62:80 两者都可，具体看前端项目地址是哪个

server {
    listen       80;
    server_name  stagings-api02.kldidi.com; // 这里填写备案的域名

    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location / {
        proxy_pass http://127.0.0.1:80; // 填写本地前端项目地址
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
    }
}

4.把app.conf加入到Nginx配置中

5.打开我们安装好的SwitchHosts工具

注意：需要右键管理员权限启动

6.右键管理员权限启动Nginx

如果上述步骤成功，我们就可以在微信开发者工具上面用映射的域名访问到本地项目

7.成功访问

例如：stagings-api02.kldidi.com，即使真机调试也能通过这个域名访问到本地前端项目，这样在调试微信一些API时就不会受阻了。手机连接同一个局域网wifi的情况下也能直接通过该域名访问到本地前端项目