微信公众号开发方向代理域名到本地开发环境

方法一：host与Nginx代理

1、本地host映射域名

vscode打开，地址、域名不可加端口号

win：C:\Windows\System32\drivers\etc

macos: 打开"访达"、点击顶部菜单：前往->前往文件夹、输入：/etc，并点击"前往"按钮

127.0.0.1 <域名>

2、配置nginx（代理80端口）

nginx安装https://blog.csdn.net/weixin_41964258/article/details/120758290https://blog.csdn.net/weixin_41964258/article/details/120758290配置文件： C:\nginx-1.20.1\conf\nginx.conf

server {
  listen       80;
  server_name  <域名>;

  #charset koi8-r;

  #access_log  logs/host.access.log  main;

  location / {
      root   html;
      index  index.html index.htm;
      proxy_pass <本地项目地址>;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

3、项目配置（vue项目：禁用主机检查）

解决Invalid Host header报错

"devServer": {
  "disableHostCheck": true
}

4、 重启

重启 vue项目、nginx服务 (在nginx根目录cmd运行命令)

nginx.exe -s reload

安装win服务重启方式：service.exe restart

5、在 浏览器、微信开发者工具 中访问即可（仅限于本电脑）

---

方法二：Charles远程映射

1、配置

 

 2、访问

（1）浏览器（刷新页面）、已直接代理到本地了

（2）微信小程序开发工具：（设置后、刷新页面）

（3）手机访问：

1、手机连上WiFi，确保手机跟PC是在同一个局域网内。

2、然后设置代理为手动，主机名填入PC的IP地址，端口8888，点击连接。

3、连接成功后，在手机端微信或者浏览器打开你要重定向的地址，这时候 Charles 会弹出一个提示框，点allow确定、在次刷新页面即可

4、如果访问的目标域名是https、还需要导出个 Charles证书、在手机中导入 Charles证书（选择用于wlan和xx应用都一起导入）