Fiddler助力微信开发调试

2019-08-15 admin

Fiddler是一个非常强大的代理工具,可以让你的前端开发调试更加方便。下面介绍在微信开发调试方面的应用。

微信网页开发中,由于有js接口安全域名和授权域名等的限制,导致部分功能需要部署到线上才能测试。通过代理可以实现本地调试网站的所有功能。

配置代理规则

全站转发可以这样设置:Tools -> HOSTS HOST配置

图片中表示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/webjarsconfiguration/ui开头的路径不转发。

目标地址表达式中的$1代表原始请求URL域名后面的字符串,包括pathsearch

设置代理服务器

打开微信开发者工具,设置 -> 代理设置 -> 选择手动设置代理Fiddler默认运行在127.0.0.1:8888

在真机上测试

在真机上测试本地微信网页项目的步骤如下:

  1. 手机和电脑连接同一个局域网。
  2. 设置Fiddler允许远程连接,Tools -> Options -> Connections -> 勾选Allow remote computers to connect

allow-remote

  1. 查看电脑在局域网中的IP地址,命令行输入ipconfig(windows)。

getIp

  1. 手机网络配置代理服务器。

phone-config

到这里,本篇文章的主要内容就结束了,如果你想了解更多关于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('connect', (req, clientSocket) => {
  let {
    port,
    hostname
  } = new URL(`http://${req.url}`);

  console.log('https', req.url);

  let serverSocket = net.connect(port || 80, hostname, () => {
    clientSocket.write(
      `HTTP/1.1 200 Connection Established
Connection: close

`
    );

    clientSocket.pipe(serverSocket);
    serverSocket.pipe(clientSocket);
  });
});

从实现方式可以看出来,这种代理服务器是无法正常获取和更改通信双方的数据的。如果要实现能监听和更改通信数据的HTTPS代理服务器,可以使用自签名证书实现,这里不做探究。

websocket

本地开发的项目往往有热更新功能,而热更新的通信依靠websocket,所以websocket代理也是必不可少的。websocket的连接也是用HTTP建立起来的。 如果根据我们之前了解的websocket知识,client会向服务器发送协议升级请求(请求报文中包含特殊的请求首部字段),服务器响应101 Switching Protocols,之后的数据则转为websocket协议发送。根据以上流程,同样只需要对http服务器代码扩充即可,我们很容易写出如下代码:

server.on('upgrade', (req, clientSocket) => {
  let {
    pathname,
    search,
    hostname,
    port
  } = new URL(req.url);

  console.log('websocket', req.url);

  let request = http.request({
    pathname: 'localhost',
    port: 8000, // 项目运行的端口
    method: req.method,
    headers: req.headers
  });

  req.pipe(request);

  request.on('upgrade', (response, serverSocket) => {
    let resStr = 'HTTP/1.1 101 Switching Protocols\r\n';

    for (let [key, value] of Object.entries(response.headers)) {
      resStr += `${key}: ${value}\r\n`;
    }

    resStr += '\r\n';

    clientSocket.write(resStr);
    clientSocket.pipe(serverSocket);
    serverSocket.pipe(clientSocket);
  });
});

server.listen(8888)

上面的写法实际上是反向代理服务器的写法。即,浏览器直接建立到ws://localhost:8888的请求,该代理服务器是能够将请求转发到8000端口的,但当浏览器设置了代理服务器后,发送websocket请求和没设置前是不同的,它同样会先向proxy请求建立连接,所以代理websocket请求和代理https请求代码是一样的,我们在connect事件中做好区分即可。

server.on('connect', (req, clientSocket) => {
  let {
    port,
    hostname
  } = new URL(`http://${req.url}`);

  console.log('https', req.url);

  // websocket请求发送到本地8000端口
  if (req.url === 'your.domain.com:80') {
    port = 8000; // 项目运行的端口
    hostname = 'localhost';
  }

  let serverSocket = net.connect(port || 80, hostname, () => {
    clientSocket.write(
      `HTTP/1.1 200 Connection Established
Connection: close

`
    );

    console.log(req.url, 'connect');

    clientSocket.pipe(serverSocket);
    serverSocket.pipe(clientSocket);
  });
});

经过以上三步,一个带有完整功能的代理服务器就写好了,想要实现自定义功能,无非是在请求报文识别和server响应报文篡改上做文章,尽情发挥你的创造力吧。

原文链接

【作者简介】:叶茂,芦苇科技web前端开发工程师,代表作品:口红挑战网红小游戏、服务端渲染官网、微信小程序粒子系统。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战: yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多

[转载]原文链接:https://segmentfault.com/a/1190000020077715

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72531.html

文章标题:Fiddler助力微信开发调试

相关文章
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
微信公众号实现无限制推送模板消息!可向指定openID群发
微信认证的服务号才有推送模板消息接口 所以本文需要在认证服务号的情况下学习 以上就是模板消息,只有文字和跳转链接,没有封面图。 在服务号的后台添加功能插件-模板消息即可。 模板消息,都是在后台选择一个群发模板的,然后获取模板ID,根据这...
2018-01-14
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
哪些互联网产品适合用HTML5开发?
J.P. Morgan(摩根大通集团)不久前发布了有关2013年互联网公司股票的研究报告,其中在预测2013年趋势时,提及移动互联网有关web和app之间的辩论将在3到5年内继续,而摩根认为这对于搜索产品和谷歌是利好消息,因为用户需要处理复...
2015-11-12
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
回到顶部