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

Fiddler是一個非常強大的代理工具，可以讓你的前端開發(fā)調試更加方便。下面介紹在微信開發(fā)調試方面的應用。

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

全站轉發(fā)可以這樣設置：Tools -> HOSTS

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

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

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

上面圖片中的正則表達式和目標地址如下：

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


http://localhost:8000$1

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

目標地址表達式中的$1代表原始請求URL域名后面的字符串，包括path和search。

打開微信開發(fā)者工具，設置 -> 代理設置 -> 選擇手動設置代理。
Fiddler默認運行在127.0.0.1:8888。

在真機上測試本地微信網(wǎng)頁項目的步驟如下：

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

設置Fiddler允許遠程連接，Tools -> Options -> Connections -> 勾選Allow remote computers to connect。

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

手機網(wǎng)絡配置代理服務器。

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

下文中，client表示客戶端（瀏覽器），proxy表示代理服務器，server表示目標服務器

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

這里可以使用nodejs的http模塊實現(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調用請求直接發(fā)送給遠程服務器，除此之外的HTTP請求發(fā)送給本地運行的端口
  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);

只有HTTP代理服務器是不夠的，因為不管是微信開發(fā)工具，還是瀏覽器，都有可能發(fā)送HTTPS請求。比如微信開發(fā)者工具的登錄和域名校驗就是使用的HTTPS與微信服務器通信的，如果不代理這部分流量是無法正常運行微信開發(fā)者工具的。

HTTPS因為報文加密的原因，proxy不能解析報文后偽裝client發(fā)送請求。最常見的解決方案是web隧道，proxy建立和client、server的TCP連接，之后盲轉發(fā)兩端的數(shù)據(jù)。

建立web隧道的方式之一是使用HTTP的CONNECT方法，實際上客戶端（瀏覽器）設置了代理服務器后，client發(fā)出的HTTPS請求是不同的，它首先會使用CONNECT方法發(fā)送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服務器能夠代理很多其他協(xié)議的流量。

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

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

本地開發(fā)的項目往往有熱更新功能，而熱更新的通信依靠websocket，所以websocket代理也是必不可少的。websocket的連接也是用HTTP建立起來的。
如果根據(jù)我們之前了解的websocket知識，client會向服務器發(fā)送協(xié)議升級請求（請求報文中包含特殊的請求首部字段），服務器響應101 Switching Protocols，之后的數(shù)據(jù)則轉為websocket協(xié)議發(fā)送。根據(jù)以上流程，同樣只需要對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
";

    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)

上面的寫法實際上是反向代理服務器的寫法。即，瀏覽器直接建立到ws://localhost:8888的請求，該代理服務器是能夠將請求轉發(fā)到8000端口的，但當瀏覽器設置了代理服務器后，發(fā)送websocket請求和沒設置前是不同的，它同樣會先向proxy請求建立連接，所以代理websocket請求和代理https請求代碼是一樣的，我們在connect事件中做好區(qū)分即可。

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

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

  // websocket請求發(fā)送到本地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);
  });
});

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

原文鏈接

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