Nginx配合hosts实现将线上地址代理到本地

我们都知道，web端和公众号，如果实现扫码获取code，必须在扫码后跳转到线上地址，调用线上接口，才能解码code，如：

getWechatCode:function(){
    var that = this;
    var url = encodeURIComponent('http://www.5imoban.net/#/account/apply');
    var state = Math.random();
    location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid='+that.appID+'&redirect_uri='+url+'&response_type=code&scope=snsapi_login&state='+state+'#wechat_redirect';
},

效果图如下：


可是，如果扫码后，跳转到线上，之后的接口如果有问题，如通过扫码获取的code去解密，出了问题，线上调试非常不方便。如果将上面的url换成本地，那么又得不到二维码：


这时，可以借助Nginx和hosts将线上地址代理到本地，也就是虽然访问的是线上，实际上调用的是本地，所以，上面的url不用换成线下，这样，仍然能够正常扫码，“欺骗”了微信。扫码之后，也可以直接在本地进行调试：

1、以“http://www.5imoban.net/”为例，在Nginx配置文件如下，其中server_name就是线上域名，location的root就是项目本地目录，proxy_pass是本地接口地址：

server {
    listen       80;
    server_name  www.5imoban.net;

    location / {
        root   H:/works/dist;
        index  index.html index.htm;
    }

    location /proxy/ {
        proxy_pass "http://60.173.242.198:8083/";
    }

2、hosts加入下面这句：

127.0.0.1 www.5imoban.net

经过上面的两步修改，再重启Nginx，再访问线上地址 www.5imoban.net，实际上就是访问本地，接口也是调用的本地，方便了调试，也可以正确的显示二维码进行扫码了。