摘要：下面介紹在微信開(kāi)發(fā)調(diào)試方面的應(yīng)用。微信網(wǎng)頁(yè)開(kāi)發(fā)中，由于有接口安全域名和授權(quán)域名等的限制，導(dǎo)致部分功能需要部署到線(xiàn)上才能測(cè)試。設(shè)置代理服務(wù)器打開(kāi)微信開(kāi)發(fā)者工具，設(shè)置代理設(shè)置選擇手動(dòng)設(shè)置代理。

Fiddler是一個(gè)非常強(qiáng)大的代理工具，可以讓你的前端開(kāi)發(fā)調(diào)試更加方便。下面介紹在微信開(kāi)發(fā)調(diào)試方面的應(yīng)用。

微信網(wǎng)頁(yè)開(kāi)發(fā)中，由于有js接口安全域名和授權(quán)域名等的限制，導(dǎo)致部分功能需要部署到線(xiàn)上才能測(cè)試。通過(guò)代理可以實(shí)現(xiàn)本地調(diào)試網(wǎng)站的所有功能。

全站轉(zhuǎn)發(fā)可以這樣設(shè)置：Tools -> HOSTS

圖片中表示your.domain.com的請(qǐng)求全部轉(zhuǎn)發(fā)到127.0.0.1:8000。第二個(gè)參數(shù)的限制是：不能加協(xié)議、路徑或參數(shù)。

如果你的網(wǎng)站域名和接口域名是同一個(gè)，那就不能使用全站轉(zhuǎn)發(fā)了，需要html、css、js、websocket請(qǐng)求轉(zhuǎn)發(fā)到本地，接口調(diào)用請(qǐng)求則直接發(fā)送到遠(yuǎn)程服務(wù)器。

可以使用自定義規(guī)則實(shí)現(xiàn)

上面圖片中的正則表達(dá)式和目標(biāo)地址如下：

regex:^http://your.domain.com(?!/api|/swagger|/webjars|/configuration/ui)(.*)


http://localhost:8000$1

本條規(guī)則表示：將your.domain.com下的http請(qǐng)求轉(zhuǎn)發(fā)到localhost:8000，其中/api、/swagger、/webjars、configuration/ui開(kāi)頭的路徑不轉(zhuǎn)發(fā)。

目標(biāo)地址表達(dá)式中的$1代表原始請(qǐng)求URL域名后面的字符串，包括path和search。

打開(kāi)微信開(kāi)發(fā)者工具，設(shè)置 -> 代理設(shè)置 -> 選擇手動(dòng)設(shè)置代理。
Fiddler默認(rèn)運(yùn)行在127.0.0.1:8888。

在真機(jī)上測(cè)試本地微信網(wǎng)頁(yè)項(xiàng)目的步驟如下：

手機(jī)和電腦連接同一個(gè)局域網(wǎng)。

設(shè)置Fiddler允許遠(yuǎn)程連接，Tools -> Options -> Connections -> 勾選Allow remote computers to connect。

查看電腦在局域網(wǎng)中的IP地址，命令行輸入ipconfig(windows)。

手機(jī)網(wǎng)絡(luò)配置代理服務(wù)器。

到這里，本篇文章的主要內(nèi)容就結(jié)束了，如果你想了解更多關(guān)于Fiddler和代理工具的使用，可以參考我同事的文章代理工具Fiddler -調(diào)試與替換接口狀態(tài)，
代理工具做微信項(xiàng)目的調(diào)試配置。
如果你想了解使用nodejs如何實(shí)現(xiàn)上述以及更多自定義的功能，敬請(qǐng)往下閱讀。

下文中，client表示客戶(hù)端（瀏覽器），proxy表示代理服務(wù)器，server表示目標(biāo)服務(wù)器

實(shí)現(xiàn)HTTP代理服務(wù)器是非常簡(jiǎn)單的，因?yàn)镠TTP為明文傳輸，所以proxy只需要解析client的HTTP報(bào)文，再向server發(fā)送相同的請(qǐng)求，server響應(yīng)時(shí)，proxy將HTTP響應(yīng)狀態(tài)，響應(yīng)首部字段和響應(yīng)主體返回給client即可。

這里可以使用nodejs的http模塊實(shí)現(xiàn)

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調(diào)用請(qǐng)求直接發(fā)送給遠(yuǎn)程服務(wù)器，除此之外的HTTP請(qǐng)求發(fā)送給本地運(yùn)行的端口
  if (!pathname.startsWith("/api")) {
    hostname = "localhost";
    port = 8000; // 項(xiàng)目運(yùn)行的端口
  }

  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);

只有HTTP代理服務(wù)器是不夠的，因?yàn)椴还苁俏⑿砰_(kāi)發(fā)工具，還是瀏覽器，都有可能發(fā)送HTTPS請(qǐng)求。比如微信開(kāi)發(fā)者工具的登錄和域名校驗(yàn)就是使用的HTTPS與微信服務(wù)器通信的，如果不代理這部分流量是無(wú)法正常運(yùn)行微信開(kāi)發(fā)者工具的。

HTTPS因?yàn)閳?bào)文加密的原因，proxy不能解析報(bào)文后偽裝client發(fā)送請(qǐng)求。最常見(jiàn)的解決方案是web隧道，proxy建立和client、server的TCP連接，之后盲轉(zhuǎn)發(fā)兩端的數(shù)據(jù)。

建立web隧道的方式之一是使用HTTP的CONNECT方法，實(shí)際上客戶(hù)端（瀏覽器）設(shè)置了代理服務(wù)器后，client發(fā)出的HTTPS請(qǐng)求是不同的，它首先會(huì)使用CONNECT方法發(fā)送HTTP請(qǐng)求，請(qǐng)求proxy建立連接，這是proxy能代理HTTPS的關(guān)鍵。

client請(qǐng)求proxy與server建立TCP連接的HTTP報(bào)文如下：

CONNECT your.domain:443 HTTP/1.1
Host: your.domain:443
Connection: keep-alive
User-Agent: M....

proxy在與server建立TCP連接后，按照約定，需要200 Connection Established響應(yīng)，響應(yīng)首部字段可自定義：

HTTP/1.1 200 Connection Established
Connection: close

所以http服務(wù)器就可以代理https請(qǐng)求。實(shí)際上，按照上面的原理http服務(wù)器能夠代理很多其他協(xié)議的流量。

https代理服務(wù)器需要使用http和net模塊，對(duì)上面的http代理的代碼擴(kuò)展即可

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);
  });
});

從實(shí)現(xiàn)方式可以看出來(lái)，這種代理服務(wù)器是無(wú)法正常獲取和更改通信雙方的數(shù)據(jù)的。如果要實(shí)現(xiàn)能監(jiān)聽(tīng)和更改通信數(shù)據(jù)的HTTPS代理服務(wù)器，可以使用自簽名證書(shū)實(shí)現(xiàn)，這里不做探究。

本地開(kāi)發(fā)的項(xiàng)目往往有熱更新功能，而熱更新的通信依靠websocket，所以websocket代理也是必不可少的。websocket的連接也是用HTTP建立起來(lái)的。
如果根據(jù)我們之前了解的websocket知識(shí)，client會(huì)向服務(wù)器發(fā)送協(xié)議升級(jí)請(qǐng)求（請(qǐng)求報(bào)文中包含特殊的請(qǐng)求首部字段），服務(wù)器響應(yīng)101 Switching Protocols，之后的數(shù)據(jù)則轉(zhuǎn)為websocket協(xié)議發(fā)送。根據(jù)以上流程，同樣只需要對(duì)http服務(wù)器代碼擴(kuò)充即可，我們很容易寫(xiě)出如下代碼：

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, // 項(xiàng)目運(yùn)行的端口
    method: req.method,
    headers: req.headers
  });

  req.pipe(request);

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

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

    resStr += "
";

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

server.listen(8888)

上面的寫(xiě)法實(shí)際上是反向代理服務(wù)器的寫(xiě)法。即，瀏覽器直接建立到ws://localhost:8888的請(qǐng)求，該代理服務(wù)器是能夠?qū)⒄?qǐng)求轉(zhuǎn)發(fā)到8000端口的，但當(dāng)瀏覽器設(shè)置了代理服務(wù)器后，發(fā)送websocket請(qǐng)求和沒(méi)設(shè)置前是不同的，它同樣會(huì)先向proxy請(qǐng)求建立連接，所以代理websocket請(qǐng)求和代理https請(qǐng)求代碼是一樣的，我們?cè)?b>connect事件中做好區(qū)分即可。

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

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

  // websocket請(qǐng)求發(fā)送到本地8000端口
  if (req.url === "your.domain.com:80") {
    port = 8000; // 項(xiàng)目運(yùn)行的端口
    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);
  });
});

經(jīng)過(guò)以上三步，一個(gè)帶有完整功能的代理服務(wù)器就寫(xiě)好了，想要實(shí)現(xiàn)自定義功能，無(wú)非是在請(qǐng)求報(bào)文識(shí)別和server響應(yīng)報(bào)文篡改上做文章，盡情發(fā)揮你的創(chuàng)造力吧。

原文鏈接

【作者簡(jiǎn)介】：葉茂，蘆葦科技web前端開(kāi)發(fā)工程師，代表作品：口紅挑戰(zhàn)網(wǎng)紅小游戲、服務(wù)端渲染官網(wǎng)、微信小程序粒子系統(tǒng)。擅長(zhǎng)網(wǎng)站建設(shè)、公眾號(hào)開(kāi)發(fā)、微信小程序開(kāi)發(fā)、小游戲、公眾號(hào)開(kāi)發(fā)，專(zhuān)注于前端領(lǐng)域框架、交互設(shè)計(jì)、圖像繪制、數(shù)據(jù)分析等研究。 一起并肩作戰(zhàn)： yemao@talkmoney.cn 訪(fǎng)問(wèn) www.talkmoney.cn 了解更多