场景
最近在开发微信公众号，前端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-clidevServer: { disableHostCheck: true }
关闭nginx使用命令
nginx -s stop如果发现进程还在可使用cmd输入taskkill /fi "imagename eq nginx.EXE" /f终止nginx进程
