Fiddler是一个非常强大的代理工具,可以让你的前端开发调试更加方便。下面介绍在微信开发调试方面的应用。
微信网页开发中,由于有js接口安全域名和授权域名等的限制,导致部分功能需要部署到线上才能测试。通过代理可以实现本地调试网站的所有功能。
配置代理规则
全站转发可以这样设置:Tools
-> HOSTS
图片中表示your.domain.com
的请求全部转发到127.0.0.1:8000
。第二个参数的限制是:不能加协议、路径或参数。
如果你的网站域名和接口域名是同一个,那就不能使用全站转发了,需要html、css、js、websocket请求转发到本地,接口调用请求则直接发送到远程服务器。
可以使用自定义规则实现
上面图片中的正则表达式和目标地址如下:
regex:^http://your.domain.com(?!/api|/swagger|/webjars|/configuration/ui)(.*)
http://localhost:8000$1
本条规则表示:将your.domain.com
下的http
请求转发到localhost:8000
,其中/api
、/swagger
、/webjars
、configuration/ui
开头的路径不转发。
目标地址表达式中的$1
代表原始请求URL域名后面的字符串,包括path
和search
。
设置代理服务器
打开微信开发者工具,设置
-> 代理设置
-> 选择手动设置代理
。
Fiddler
默认运行在127.0.0.1:8888
。
在真机上测试
在真机上测试本地微信网页项目的步骤如下:
- 手机和电脑连接同一个局域网。
- 设置
Fiddler
允许远程连接,Tools
->Options
->Connections
-> 勾选Allow remote computers to connect
。
- 查看电脑在局域网中的IP地址,命令行输入
ipconfig
(windows)。
- 手机网络配置代理服务器。
到这里,本篇文章的主要内容就结束了,如果你想了解更多关于Fiddler和代理工具的使用,可以参考我同事的文章代理工具Fiddler -调试与替换接口状态,
代理工具做微信项目的调试配置。
如果你想了解使用nodejs如何实现上述以及更多自定义的功能,敬请往下阅读。
nodejs实现代理服务器
下文中,client表示客户端(浏览器),proxy表示代理服务器,server表示目标服务器
HTTP
实现HTTP代理服务器是非常简单的,因为HTTP为明文传输,所以proxy只需要解析client的HTTP报文,再向server发送相同的请求,server响应时,proxy将HTTP响应状态,响应首部字段和响应主体返回给client即可。
这里可以使用nodejs的http
模块实现
const http = require('http');
const {
URL } = require('url');
let server = http.createServer((req, res) => {
let {
pathname,
search,
hostname,
port
} = new URL(req.url);
console.log('http ', req.url);
// 后端api调用请求直接发送给远程服务器,除此之外的HTTP请求发送给本地运行的端口
if (!pathname.startsWith('/api')) {
hostname = 'localhost';
port = 8000; // 项目运行的端口
}
req.pipe(http.request({
hostname,
port,
path: `${
pathname}${
search}`,
method: req.method,
headers: req.headers
}, (response) => {
res.writeHead(response.statusCode, response.statusMessage, response.headers);
response.pipe(res);
}));
});
server.listen(8888);
HTTPS
只有HTTP代理服务器是不够的,因为不管是微信开发工具,还是浏览器,都有可能发送HTTPS请求。比如微信开发者工具的登录和域名校验就是使用的HTTPS与微信服务器通信的,如果不代理这部分流量是无法正常运行微信开发者工具的。
HTTPS因为报文加密的原因,proxy不能解析报文后伪装client发送请求。最常见的解决方案是web隧道,proxy建立和client、server的TCP连接,之后盲转发两端的数据。
建立web隧道的方式之一是使用HTTP的CONNECT方法,实际上客户端(浏览器)设置了代理服务器后,client发出的HTTPS请求是不同的,它首先会使用CONNECT方法发送HTTP请求,请求proxy建立连接,这是proxy能代理HTTPS的关键。
client请求proxy与server建立TCP连接的HTTP报文如下:
CONNECT your.domain:443 HTTP/1.1
Host: your.domain:443
Connection: keep-alive
User-Agent: M....
proxy在与server建立TCP连接后,按照约定,需要200 Connection Established
响应,响应首部字段可自定义:
HTTP/1.1 200 Connection Established
Connection: close
所以http服务器就可以代理https请求。实际上,按照上面的原理http服务器能够代理很多其他协议的流量。
https代理服务器需要使用http和net模块,对上面的http代理的代码扩展即可
server.on