反向代理 微信公众号网页 本地调试

标签（空格分隔）： 前端

前言

微信公众号调试需要域名在 微信管理后台白名单中，因此对于本地调试特别不方便。为了在本地模拟出线上的环境，骗过微信的域名检查，可以通过 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