企业微信侧边栏本地调试

cubeSuger_方糖
2,826 阅读4分钟

引言

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

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

Charles 、Fiddler

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

Nginx反向代理

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

具体操作步骤如下：

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

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

127.0.0.1 test.wxworksidebar.com

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

  1. Nginx 的安装和配置

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

Mac

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

Window

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

  1. 配置 Nginx

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

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

image.png

添加方向代理：

Pasted image 20220407235331.png

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

Pasted image 20220407235558.png

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

#user nobody;

worker_processes 1;


events {

	worker_connections 1024;

}


http {

	include mime.types;
	
	default_type application/octet-stream;
	
	
	sendfile on;
	
	
	keepalive_timeout 65;
	
	  
	server {
	
		listen 8080;
		
		server_name localhost;
	
	
		location / {
		
			root html;
			
			index index.html index.htm;
	
		}
	
	
		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 即可进行本地开发调试。

原理分析

不出意外的话，按照上面的步骤执行就可以正常的开发了。如果是为了达到目的而不探讨其原理的话，那么当下一次遇到问题的时候肯定也是找不到对应的方法来解决问题的，所以 本着钻研技术的精神，我们浅析一下这个其中的原理。

前面有说过，当我们打开企业微信侧边栏的时候，其实就是相当于用浏览器打开了一个网址。那么我们便可以从浏览器打开网址这一方向开始分析：

  1. 当浏览器打开一个网址的时候，首先会查找浏览中的DNS缓存有没有关于这条域名对应的IP地址，如果有则访问IP中对应的资源。
  2. 如果没有则会向本机的Host中查找，如果有则访问IP中对应的资源。
  3. 如果没有则会向本地网络路由器中配置的DNS服务器中查找，如果有则访问IP中对应的资源。
  4. 如果没有路由器则会在路由表中查找上一级路由器，然后重复步骤3 。
  5. 如果到达顶级路由器也没找到网址所注册的IP地址，则显示404效果。

具体流程如下图：

Pasted image 20220410204659.png

总结

使用反向代理这个方案相对来说还是比较普遍的，能适用很多的开发场景，不仅仅只是这一种。 只要熟悉其背后的原理，遇到问题的时候就能意识到可以使用这种反向代理来解决问题，达到举一反三的效果。

avatar
文章
阅读
粉丝