标签 (空格分隔): 前端
前言
微信公众号调试需要域名在 微信管理后台白名单中, 因此对于本地调试特别不方便. 为了在本地模拟出线上的环境, 骗过微信的域名检查, 可以通过 host + nginx 反向代理来实现本地调试.
host 文件
修改 host 文件, 添加白名单域名的映射, 访问域名就是访问本地了
127.0.0.1 www.whitelist.com
nginx 配置
nginx -t 得知本地配置文件位置, 修改它
- # http 内添加以下内容
- server {
- listen 80; # 监听本机 80 端口, 也就是默认端口
- server_name www.whitelist.com; # 监听域名
- location / {
- # 代理该域名到 8080 端口, 就是前端跑起开发环境
- proxy_pass http://127.0.0.1:8080;
- # 解决 content mismatch
- # proxy_buffering off;
- }
- }
- # 如果使用 webpack-dev-server 疯狂报错, 可以使用下面解决 ws 报错问题
- server {
- listen 80;
- server_name localhost;
- location /sockjs-node/ {
- proxy_set_header X-Real-IP $remote_addr;
- proxy_set_header X-Forwarded-For $remote_addr;
- proxy_pass http://127.0.0.1:8080/sockjs-node/;
- proxy_http_version 1.1;
- proxy_set_header Upgrade $http_upgrade;
- proxy_set_header Connection "upgrade";
- }
- }
最后 nginx -s reload 或者 nginx
开发者工具问题
开发者工具默认开启 HSTS, 就是访问过 https 的网站, 是访问不到 http 的, 会自动转为 https, 而且不能关掉. 如果出现该问题可以删掉开发者工具的用户信息, 并重启开发者工具.
Mac: $HOME/Library/Application\ Support / 微信开发者工具
win: C:\Users\xxxxx\AppData\Local \ 微信开发者工具 \ User Data
来源: http://www.jianshu.com/p/736e379ca0ea