微信公众号开发，反向代理至本地的方法

1. 因为webpack起的devServer 指向的是localhost， 而公众号登录通常会跳转一个微信授权获取code的地址，如

const GET_OPEN_ID_URL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfdfea590dfe9a10ereqd1cf11e1&redirect_uri=http://www.love.com/dist/index.html&response_type=code&scope=snsapi_base&#wechat_redirect`

而上面的 redirect_uri 又必须是微信验证过的网址，不是能是localhost:8000这样的地址，所以就需要修改本的hosts文件，强制跳至127.0.0.1

2. 修改hosts文件，内容如下

127.0.0.1 localhost

127.0.1.1 gyx-PC

127.0.0.1 u.jiyoukeji.cn

127.0.0.1 www.love.com

此时微信再跳转 www.love.com 时，会跳至127.0.0.1的端口

3. 但是通常网页的默认端口是80,也就是说 http://www.love.com/dist/index.html 会跳至 localhost:80 (127.0.0.1:80)端口，而webpack的devServer的地址通常是locahost:8080等。所以需要起一个nginx 服务器， 将80端口的请求反向代理至8080端口，nginx 代理服务器的核心部分配置如下

server {    

    listen 80;    

    server_name www.love.com;    

    #charset koi8-r;    

    #access_log logs/host.access.log main;    

    location / {        

        #root html;        

        #index index.html index.htm;        

        proxy_pass http://localhost:8080;    

    }

}

由于我的开发环境用的deepin，通常情况会在Home下写一个简单的脚本用来一键启动

#!bin/bash

cd /usr/local/nginx

sudo ./sbin/nginx -c ./conf/love.conf

4. 由于hosts 文件中，已经将www.love.com的地址定向至了localhost，因为所有指向该地址的真实请求都不会生效，因些在开发环境下还要将请求api的接口改为ip请求。不能是原来的地址请求的方式。

5. 需要注意的问题，由于修改了hosts文件，如果(例)www.love.com 上有其他的开发项目，会导致请求无效的问题，记得要改回来。