前后端分离的微信开放平台网站应用实现微信登录的本地调试

通过孟繁永

前后端分离的微信开放平台网站应用实现微信登录的本地调试

前面那一篇说了基于laravel+vue的实现方式和不要踩的坑,这一篇记录一下如何实现本地调试和线上部署。

当然,线上就按上一篇就好了,在vue-wxlogin里面配置appid(微信开放平台里面的网站应用的appid,需要先申请),laravel里需要配置appid和secret。

现在主要说一下如何在本地调试。vue-wxlogin显示二维码的时候需要appid和回调地址一致,如果把线上域名反向隧道到本地,那么线上就用不了,如果用本地的hosts来解析,那么就无法同时访问线上的版本。所以比较好的办法是专门申请一个测试用的网站应用,比如portal.local.futuremeng.com,通过vi /etc/hosts添加127.0.0.1 portal.local.futuremeng.com来将这个域名解析到本地环境。

然后在本地的nginx中添加一个站点,配置文件如下:

server {
     listen 80;
     server_name portal.local.futuremeng.com;
     charset utf8;
     location / {
        proxy_pass http://192.168.2.180:6060/;
        add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self'; style-src 'self' 'unsafe-inline';";
        proxy_set_header Host            $host;
        proxy_set_header X-Real-IP       $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    }
}

其中,IP换成你自己的电脑的IP,如果是docker跑的nginx,需要指定为本机的局域网IP,也就是docker的宿主机IP,否则,如果设置成127.0.0.1是访问不到后面在vscode中建立的服务的。

最后打开vscode,打开vue项目,设置一下devServer的port,我用6060是为了同时npm run serve起多个前端项目,而这一个专用这个端口,以便nginx这里能够保持可用。

关于作者

孟繁永 administrator

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据