場景

最近在開發(fā)微信公眾號，前端vue引入js-sdk，公眾平臺已經(jīng)配置好安全域名，本地聯(lián)調(diào)配置wx.config需要發(fā)布到線上測試環(huán)境，非常的麻煩，影響開發(fā)效率。

解決

可以用nginx代理把本地localhost代理成安全域名，這樣就可以在微信開發(fā)者工具中直接訪問聯(lián)調(diào)

1.第一步（安裝nginx）

下載nginx，選擇版本下載

image.png

image.png

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

win+R 輸入 C:\WINDOWS\system32\drivers\etc 點擊回車
打開hosts文件
在最后一行添加 127.0.0.1 kaifa.com kaifa.com是你眾號配置的安全域名

image.png

3.修改nginx默認(rèn)配置

 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

注意：此時如果直接訪問域名會出現(xiàn) ：Invalid Host header 還需要配置一下腳手架的vue-cli devServer: { disableHostCheck: true }

關(guān)閉nginx使用命令nginx -s stop 如果發(fā)現(xiàn)進(jìn)程還在可使用cmd輸入taskkill /fi "imagename eq nginx.EXE" /f終止nginx進(jìn)程