企业微信侧边栏本地调试

引言

在开发企业微信自建应用中的侧边栏功能时，一般都会想着怎么才能像使用开发者工具那样在本地调试页面，如果仔细观察的话就会发现，其实就是侧边栏就是企业微信中一个访问特定地址的浏览器，因此可以把侧边栏的路径配置成本地ip和端口，那么在企业微信打开时便能够访问到本地的应用。

然而在登陆时，授权的回调地址是会经过企业微信的合法性检验，所以上面的方法虽然能够打开我们的本地应用，但是却没有办法授权，虽然也可以通过模拟登陆的方法来绕过，但是手动操作一来麻烦，二来容易出错，于是便有了下面的方法：

Charles 、Fiddler

这是我在掘金上找到的另外一种比较简单的方法，详情跳转：企业微信自建应用侧边栏配置为本地环境

Nginx反向代理

原理其实跟上面的方案差不多，都是通过修改 host 使得把域名请求转到本地机子，然后再通过反向代理把请求再转发到应用启动时的ip和端口，从而骗过企业微信的域名校验，达到本地调试的目的。

具体操作步骤如下：

首先我们需要一个能够快速修改本地机子 host 配置的软件，这里推荐一下

Mac —— iHosts
Window —— SwitchHosts

安装完成后根据软件的使用方式，把企业微信侧边栏的合法回调地址配置到 host 文件中，然后指向本机。假设合法地址是test.wxworksidebar.com，那么需要在 host 文件中添加一行：

127.0.0.1 test.wxworksidebar.com
复制代码

其中 127.0.0.1也可以使用本机所在的网络ip来代替。

Nginx 的安装和配置

Nginx的安装相对比较麻烦，这里对 Mac 和 Window 分别介绍：

Mac

首先安装 HomeBrew，最好能够使用无障碍网络来进行安装。
安装完成后，执行安装 Nginx 的命令：brew install nginx。
等待 Nginx 安装完成后，使用 HomeBrew 来启动 Nginx： brew services start nginx。
打开浏览器访问 localhost:8080，如果可以正常出现 Nginx 欢迎页面，则代表 Nginx 安装并启动成功。

Window

window 的 Nginx 比较神奇，一般都不怎么好用和管理，这里推荐一个集成的软件 nginxWebUI，推荐使用 Docker 的方式进行安装。

配置 Nginx

对于前端来说，想在短时间内弄懂 Nginx 的配置也是有相当大的难度的，这里推荐使用 nginxWebUI 的管理后台来生成自己想要的 Nginx 配置代码。

nginxWebUI 有一个演示 Demo，用户名和密码都是 admin，进入到 nginxWebUI 的管理界面后，选择方向代理菜单：

添加方向代理：

Pasted image 20220407235331.png

提交后在列表中选择预览按钮，则可以查看刚刚添加的 Nginx 配置：

Pasted image 20220407235558.png

把上面的配置代码复制，然后粘贴到本地的 Nginx 配置文件中，Mac 的 Nginx 配置在/opt/homebrew/etc/nginx/nginx.conf

#user nobody;

worker_processes 1;

  

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

  

# pid logs/nginx.pid;

  
  

events {

worker_connections 1024;

}

  
  

http {

include mime.types;

default_type application/octet-stream;

  

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '

# '$status $body_bytes_sent "$http_referer" '

# '"$http_user_agent" "$http_x_forwarded_for"';

  

#access_log logs/access.log main;

  

sendfile on;

#tcp_nopush on;

 

#keepalive_timeout 0;

keepalive_timeout 65;

#gzip on;

server {
    listen 8080;
    server_name localhost;
    #charset koi8-r;
    #access_log logs/host.access.log main;
    location / {
        root html;
        index index.html index.htm;
    }
    #error_page 404 /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }  
    #....
}

# 这里是新添加的代码

server {
    server_name test.wxworksidebar.com;
    listen 80;
    location / {
        proxy_pass http://192.168.0.170:8090/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# ....

include servers/*;

}
复制代码

重启Nginx 即可进行本地开发调试。