微信公众号本地调试开发

前因说明

公众号开发时由于微信限制："用户在网页授权页同意授权给公众号后，微信会将授权数据传给一个回调页面，回调页面需在此域名下，以确保安全可靠"。如下图所示，只有进行在网页授权域名下的域名才能进行授权或调用其他微信SDK的方法。但域名是打包发布后才会使用的，这对于调试来说极其不友好，意味着你要调试必须每次发布代码以后才能进行。本文就前端时时本地开发调试讲一下方法。

方法介绍

我知道两种方法。

将公众号后台配置的域名，本地访问时解析到本地。

配置一个redirect_uri在公用方法，这个方法要先发布上线。进行授权页访问时存在2个redirect_uri。第一个个redirect_uri到后台配置的域名。在通过前面提到的公用方法个redirect_uri到本地IP.

本文主讲第一种方法，步骤大纲：

域名解析到本地
nginx端口转发（可省略此步骤）

域名解析到本地

将微信后台配置的域名（这里我配置的是www.test.cn）在本地访问时解析到本地。其实很简单，修改hosts文件（不会的参考这里）即可，如图所示：

这时我们可以测试一下是否有效，访问 www.test.cn:8080等价于访问127.0.0.1:8080。有效在进行下一步。

端口转发

前面提到可省略此步骤，此时进行调试访问www.test.cn:8080，即hosts文件中配置的域名加本地开发端口即可。

做端口转发则在调试时就不需要端口了，访问**www.test.cn**即可。通过**nginx**配置**如下图**。因为**网页**默认是**80端口**，通过Nginx做**端口转发**到**本地调试端口**。

    server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   html;
                index  index.html index.htm;
                proxy_pass http://127.0.0.1:8080;
            }
    }

特殊注意点

如果是用到本文中的方法一即修改hosts文件来进行调试，可能会遇到一个障碍。如果你的前端域名和接口域名是一样的话，那此时接口肯定访问报错了，因为接口访问也都解析访问你本地服务了。

解决办法：将后台接口域名采用IP+端口的方式访问即可。

小结

上面提到的2个方法都很简单。其中方法一简单高效，但团队开发时每个人都要做一遍配置。方法二本文并没有详细讲解，但确是一劳永逸的方法，正所谓前人裁树后人乘凉，缺点是本地调试时会多一次跳转。