国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Fiddler助力微信開發調試

mengera88 / 3554人閱讀

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

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/webjarsconfiguration/ui開頭的路徑不轉發。

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

設置代理服務器

打開微信開發者工具,設置 -> 代理設置 -> 選擇手動設置代理
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("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
";

    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的請求,該代理服務器是能夠將請求轉發到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 了解更多

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106777.html

相關文章

  • 移動端真機調試實戰經驗

    摘要:我個人比較推薦的方法是或者安卓手機的這種方式,比較簡單方便快捷,然后根據具體的環境再選擇更為合適的調試方法。 本文首次發表于本人的個人博客:http://cherryblog.site/ ,歡迎大家到我的博客查看更多文章~ 前言 在開發中前端免不了要進行移動端的開發,然而在電腦上看的樣式和手機上還是有一定的差距的,因為手機上有頂部的狀態欄和底部的菜單欄,特別是在qq內置瀏覽器中打開,差...

    rainyang 評論0 收藏0
  • 記一次使用Fiddler抓包工具抓取Https協議數據的踩坑過程

    摘要:直到今天,突然看到一個有意思的微信小游戲。后來試了幾次之后才發現,這個小游戲比較刁,不僅做了微信的登錄授權,而且做了手機端訪問的判斷,更甚至竟然用的還是協議的網頁。調用的目標發生了異常。 記一次使用Fiddler抓包工具抓取Https協議數據的踩坑過程 前言 記得從剛入門前端第一天開始,當時的師傅就跟我介紹了一個可以抓取一些必須要在微信瀏覽器打開的鏈接的工具Fiddler,主要用來抓取...

    JackJiang 評論0 收藏0
  • 用友云開發者中心你上云系列之在線調試

    摘要:如何使用開發者中心進行在線調試如果你已經使用了開發者中心部署應用上云,那么,可以非常榮幸的告訴你,看完下面的步驟,只需幾秒鐘的配置,就可以解救你于水火之中。此過程也可以用于日常開發過程中的在線定位問題,面對眾多的微服務,無需再煩惱了。 現在,大家開始越來越多的談論到高可用架構的互聯網應用。什么是高可用?高可用HA(High Availability)是分布式系統架構設計中必須考慮的因素...

    opengps 評論0 收藏0
  • 用友云開發者中心你上云系列之在線調試

    摘要:如何使用開發者中心進行在線調試如果你已經使用了開發者中心部署應用上云,那么,可以非常榮幸的告訴你,看完下面的步驟,只需幾秒鐘的配置,就可以解救你于水火之中。此過程也可以用于日常開發過程中的在線定位問題,面對眾多的微服務,無需再煩惱了。 現在,大家開始越來越多的談論到高可用架構的互聯網應用。什么是高可用?高可用HA(High Availability)是分布式系統架構設計中必須考慮的因素...

    dunizb 評論0 收藏0

發表評論

0條評論

mengera88

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<