配置nginx在本地调试微信公众号

场景

最近在开发微信公众号，前端vue引入js-sdk，公众平台已经配置好安全域名，本地联调配置wx.config需要发布到线上测试环境，非常的麻烦，影响开发效率。

解决

可以用nginx代理把本地localhost代理成安全域名，这样就可以在微信开发者工具中直接访问联调

1.第一步（安装nginx）

下载nginx，选择版本下载

image.png
下载完解压到盘符目录下 image.png
打开cmd 执行启动命令 D:\nginx-1.18.0>start nginx

2.第二步(修改本地host)

win+R 输入 C:\WINDOWS\system32\drivers\etc 点击回车
打开hosts文件
在最后一行添加 127.0.0.1 kaifa.com kaifa.com是你众号配置的安全域名

image.png

3.修改nginx默认配置

 server {
        listen       80;
        server_name  kaifa.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
           proxy_pass http://localhost:8081;  //项目的启动地址和端口
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

4.重启项目和nginx

重启项目：npm run xxx
重启nginx: nginx -s reload

注意：此时如果直接访问域名会出现 ：Invalid Host header 还需要配置一下脚手架的vue-cli devServer: { disableHostCheck: true }

关闭nginx使用命令nginx -s stop 如果发现进程还在可使用cmd输入taskkill /fi "imagename eq nginx.EXE" /f终止nginx进程